Slide 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

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

Slide 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

Slide 4 Inserting Images The tag represents

Slide 5 The 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)

Slide 6 The 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)

Slide 7 The 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

Slide 8 The Element (Examples) Insert an image using a relative reference The current directory

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

Slide 10 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

Slide 11 Image Maps (Creating) Use the element The element contains the name of the image file The usemap attribute contains a bookmark The element contains multiple elements elements define the shape and the link visited when the area is clicked

Slide 12 Image Maps (Best Practices) They are a pain to create by hand You really need a tool to create these easily See ov.do?topTabIndex=CampgroundMap ov.do?topTabIndex=CampgroundMap