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.
![Two different image formats combined into one](/api/v2/epubs/0596005768/files/tagoreillycom20070312oreillyimages168757.png.jpg)
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).
![Two images that will be used to create one image](/api/v2/epubs/0596005768/files/tagoreillycom20070312oreillyimages168759.png.jpg)
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 ...
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.