1. Graphics (Characteristics 1)
Images have various characteristics that affect performance
Size (number of pixels) – Large images can be several megabytes
Color (bits per pixel) – The more colors, the larger the image
Compression – Algorithms exist to compress images without any loss of fidelity

2. Graphics (Characteristics 2)
Interlacing – loads and renders alternating lines to improve perceived performance

3. Images (Types) JPEG compresses well and handles many colors
PNG-24 works well but results in larger files
GIF files support only 260 colors
See table 5.1 in the text book

4. The <img> Element (Introduction)
It’s used to
Pull images into HTML documents when the documents are rendered
Images are stored separate from the HTML file referencing the image
When using thumbnails, you are really using two images
Alternate text can appear if the image is unavailable (accessibility)

5. The <img> Element (Attributes)
src - the absolute or relative URL containing the image
alt – Text to display in place of the image file (Use to improve accessibility)
width – width of the image (in pixels)
height – height of the image (in pixels)

6. The <img> Element (Notes)
If you don’t set the height and width, the image will be rendered at its original size
If you set the height and width, the image will be scaled as needed
The image might be stretched
I won’t use the deprecated formatting attributes favoring CSS

7. The <img> Element (Examples)
Insert an image using a relative reference
The current directory
<img src="NevadaRGB.gif" alt="Nevada N"/>

8. Making an Image into a Link
Simply embed the <img> tag into the content of the <a> tag as in
<a href="
<img src="NevadaRGB.gif"
alt="Nevada N" height="100px",
width="200px" />
</a>

9. Image Maps (Introduction)
Simply put, they allow you to create links to other Web pages using images
Different links are visited depending on where in the image the user clicked
These regions are called hot zones

10. Image Maps (Creating) Use the <img> element
The <src> element contains the name of the image file
The usemap attribute contains a bookmark
The <map> element contains multiple <area> elements
<area> elements define the shape and the link visited when the area is clicked

11. Image Maps (Best Practices)
They are a pain to create by hand
You really need a tool to create these easily
See