Recipe 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 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 10-13 you can see that the line art of the boat was overlaid on the photograph of the two children.

Figure 10-13. Intricate combination of different image formats

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="kids.jpg" width="360" height="304"  alt="kids 

playing" /> 

  <div id="boat"><img src="boat.gif" width="207" height="123"

   alt="boat" /></div>

  <div id="water"><img src="landscape.gif" width="315"

height="323" 

   alt="landscape" /></div>

 </body>

</html>

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 you 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 shown in Figure 10-14:

<h2>Kids Welcome New Boat!</h2>

 <img src="kids.jpg" width="360" height="304"  alt="kids 

playing" /> 

 <div id="boat"><img src="boat.gif" width="207" height="123"

   alt="boat" /></div>

 <div id="water"><img src="landscape.gif" width="315" height="323"

alt="landscape" /></div>

Figure 10-14. Presentation breaks with addition of 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 10-15 and shown in the following code:

Figure 10-15. A different approach to combining images

<!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 id="content">

   <h2>Kids Welcome New Boat!

    <span id="boat">

    </span>

   </h2>

  </div>

 </body>

</html>