Web Design in a Nutshell, 3rd Edition

Image Formats and Usage

Web images must be in one of the three web-compatible formats: GIF, JPEG, or PNG. Furthermore, the files should be named with the proper suffixes--.gif, .jpeg or .jpg, and .png, respectively—so that your web server sends the proper Content-Type--image/gif, image/jpeg, and image/png, respectively—which the browser uses to recognize the image format. These graphic file formats, as well as other requirements for putting images online, are discussed in detail in Part V.

Inline images are used in a variety of ways:

As a simple image

An image can be used on a web page much as it is used in print—as a static image that adds information, such as a company logo or an illustration.

As a link

An image can also be used to link to another document as an alternative to text links.

As an image map

An image map is a single image with multiple “hotspots” that link to other documents. There is nothing special about the image itself; it is an ordinary inline image. Special HTML markup and map files link pointer coordinates with their respective URLs. The upcoming "Image Maps" section of this chapter includes a full explanation of how image maps work and how to create them.

Warning

Images (transparent GIFs, in particular) have also been used as spacing devices, but now that we have better control of space and alignment with Cascading Style Sheets, this use of spacer images is outdated and must be avoided in contemporary web design.

With the emergence of standards-driven web design ...