The Web Wizard

1
The Web Wizards Guide to HTML

• Chapter Five
• Working with Images

2
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

3
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

4
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

5
Lossy Image Compression

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

6
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

7
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

8
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

9
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

10
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

11
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