Transcript Chapter 5

The Web Wizard’s 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

Trades image quality for memory savings

Very good for minimizing bandwidth

You control the trade-off when you save the
image
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

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 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

Navigational menus and navigation bars have
clickable regions that take the user to different
locations

HTML’s 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

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

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