Recipe 3.13. 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 (see Figure 3-23).

Figure 3-23. 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="/books/3/27/1/html/2/headline_text.gif" alt="Headline image set in  GIF format" /></h2>

Use an image-editing program, to separate the elements of the image into separate file formats (see Figure 3-24).

Figure 3-24. 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 3-23 and 3-24, the file size of the two separate images added together is actually less than the file size of the final, combined image. This occurs because part of the image would work against the compression scheme of one file format. If you saved the presentation as one GIF, the photographic portions of the image would create an inflated file size. And if you saved the image as a JPEG, the areas of flat color would inflate the size. By splitting up the images into different formats that leverage their respective compression schemes, you reduce file sizes overall.

Although the method in this solution uses background properties in CSS, you can accomplish the same effect by positioning block elements that contain inline images. For example, in Figure 3-25, you can see that the line art of the boat was overlaid on the photograph of the two children.

To make this method work, wrap the image elements in block-level div elements, as shown in the following HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <title>CSS Cookbook</title>  </head>  <body>   <img src="/books/3/27/1/html/2/kids.jpg" width="360" height="304"  alt="kids  playing" />    <div ><img src="/books/3/27/1/html/2/boat.gif" width="207" height="123"    alt="boat" /></div>   <div ><img src="/books/3/27/1/html/2/landscape.gif" width="315" height="323"     alt="landscape" /></div>  </body> </html>

Figure 3-25. Intricate combination of different image formats

Then, through CSS, set the position of the elements to absolute. By setting the position to absolute, you take the elements out of the normal flow of the web page, and instead assign values to the left, top, and z-index properties to determine their new placements:

#boat {  position: absolute;   width: 207px;   height: 123px;   z-index: 2;   left: 264px;   top: 0; } #water {  position: absolute;  width: 315px;   height: 323px;   z-index: 1;   left: 359px;   top: -20px; }

The left and top properties indicate the placement of the images within their nearest positioned ancestor element or the initial containing block. In this case, it's the initial containing block to the div elements.

Furthermore, the body element's margin has a value of 0, meaning that the origin point is in the upper-left corner of the browser's viewport:

body {  margin: 0; }

Even though this method works, if the web document is later modified, exact positioning becomes a design liability. For example, adding a simple headline above the images in the HTML results in the anomaly you see in Figure 3-26:

<h2>Kids Welcome New Boat!</h2>  <img src="/books/3/27/1/html/2/kids.jpg" width="360" height="304"  alt="kids  playing" />   <div ><img src="/books/3/27/1/html/2/boat.gif" width="207" height="123"    alt="boat" /></div>  <div ><img src="/books/3/27/1/html/2/landscape.gif" width="315" height="323" alt="landscape" /></div>

Figure 3-26. Presentation breaks with the addition of a heading

Because the image of the children has not been positioned with absolute, it moves down the flow of the document. The other image stays in place because it has been positioned within the initial containing block and is still in the same place it was before the headline was added.

By using the background-positioning method within block-level elements, you can create a self-containing module. Then, when content is added to and removed from the web page, the presentation remains whole, as seen in Figure 3-27 and shown in the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <title>CSS Cookbook</title> <style type="text/css"> body {  margin: 5% 10% 0 10%; } #content {  background-image: url(landscape.gif);  background-repeat: no-repeat;  background-position: bottom right;  height: 400px;  width: 674px; } h2 {  margin: 0;  padding: 0;  background-image: url(kids.jpg);  background-repeat: no-repeat;  background-position: bottom left;  height: 400px;  width: 600px; } #boat {  background-image: url(boat.gif);  background-repeat: no-repeat;  display: block;  width: 207px;  height: 123px;  margin-left: 250px;  margin-top: 75px; } </style>  </head>  <body>   <div >    <h2>Kids Welcome New Boat!     <span >     </span>    </h2>   </div>  </body> </html>