The Web Wizards Guide to HTML Chapter Five Working with Images

Chapter Objectives Explain when to employ the GIF, JPEG, and PNG file formats Show how thumbnail previews can minimize bandwidth consumption Find out how to create and use transparent GIFs Demonstrate how to create an image map Introduce animated GIFs and streaming media

GIF (Graphics Interchange Format) Uses an adaptive 8-bit color palette (256 colors) Especially suitable for line art and cartoons Can work well for some photographs

JPEG (Joint Photographic Experts Group) Uses a fixed 24-bit color palette (millions of colors) Especially suitable for high-resolution photographs Uses lossy file compression

Lossy Image Compression Lossy Image Compression Trades image quality for memory savings Very good for minimizing bandwidth You control the trade-off when you save the image

Interlaced GIFs Interlaced GIFs Displays images incrementally in four passes Gives users something to look at while the image is still downloading Any GIF image can be converted to an interlaced GIF

Thumbnail Previews Thumbnail Previews Let your visitors decide if they want to download a large (bandwidth intensive) image Use lossy file compression to create a small (light bandwidth) thumbnail version of the original image Make the thumbnail sketch a link label so users can click through to the original image if they want it

Transparent GIFs Transparent GIFs Transparent regions in an image allow the background color or pattern of a Web page to show through Any GIF image can be made transparent by specifying one color in the image that defines its transparent regions The background of a photograph can be made transparent after some graphics editing

Image Maps Image Maps Navigational menus and navigation bars have clickable regions that take the user to different locations HTMLs map element makes it possible to specify different clickable regions within a single image Image maps can be created manually with the ISMAP trick or with the help of an image mapper

Animated GIFs Animated GIFs The GIF file format supports cartoon animations An animated GIF is stored in a single GIF file To display an animated GIF, just specify the GIF file in the SRC attribute of an IMG tag

Streaming Media Streaming Media Video and audio files are often available on the Web via streaming media A media player is needed to process streaming media By buffering very large files in successive pieces, a media player can render one portion of a video or a recording long before the rest of the file has arrived