Index by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

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 4-24.

Two different image formats combined into one

Figure 4-24. 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 4-25).

Two images that will be used to create one image

Figure 4-25. 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 (and PNGs making a strong triad). Both compress images in different ways. Typically, images with flat areas of color compress better in the GIF format, whereas JPEG images are better for photos or images that contain fine color gradations.

In the example shown in Figures 4-24 and 4-25, 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 4-26 you can see that the line art of the boat was overlaid on the photograph of the two children.

Intricate combination of different image formats

Figure 4-26. 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 4-27:

<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>
Presentation breaks with addition of heading

Figure 4-27. 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-contained module. Then, when content is added to and removed from the web page, the presentation remains whole, as seen in Figure 4-28 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 id="content">
   <h2>Kids Welcome New Boat!
    <span id="boat">
    </span>
   </h2>
  </div>
 </body>
</html>
A different approach to combining images

Figure 4-28. A different approach to combining images

See Also

Creating Unexpected Incongruity for creating unexpected incongruity between two elements; Combining Unlike Elements to Create Contrast for combining unlike elements

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required