CSS Cookbook

10.6. Combining Different Image Formats

Problem

You want to combine two different image formats into one presentation. For example, you want to combine GIF and JPEG images into one graphical presentation as shown in Figure 10-11.

Figure 10-11. Two different image formats combined into one

Solution

Place an image inside a block-level element such as a div or h2:

<h2><img src="headline_text.gif" alt="Headline image set in 
GIF format" /></h2>

Using an image-editing program, separate the elements of the image into separate file formats (see Figure 10-12).

Figure 10-12. Two images that will be used to create one image

Name one of the images the same as the image referred to in the src attribute for the img element. Place the other image in the background of the block-level element to merge both images into one presentation.

h2 {
 background-image: url(headline_bkgd.jpg);
 background-repeat: none;
 width: 587px;
 height: 113px;
}

Discussion

The two prevailing image formats on the Web are GIF and JPEG. Both compress images in different ways. Typically, images with flat areas of color compress better in the GIF format, while JPEG images are better for photos or images that contain fine color gradations.

In the example shown in Figures Figure 10-1 and Figure 10-2, the file size of the two separate images added ...