Using GIF and JPG in one image?

Current weight: 80 kgs

Look at the above graphic above. I’ve separated the various parts so that you can clearly make them out. These parts can be combined into one image with the help of an HTML <table>. Here are the parts that make up the “image”:

• A transparent 1×1 pixel gif that has been resized.
• The top image of the girl
  
  This is a JPG image.
• The bottom image of the graph with the lower part of the girl’s body.
  
  
  This is a GIF image
• The text is obviously “Current weight: 80 kgs“

The three images and the text have been placed inside a table so that they join to form a whole image. This is actually a live example from a client’s web site. Why did I split one large image into two GIFs and one JPG? Here are the reasons

• We needed to include dynamic text. A part of the text that appears (80 kgs) is calculated from some values that the visitor enters via a form.
• The top image of the girl is better rendered as a JPG (as it’s a photograph). If we have this as a JPG, the file size is optimized.
• The bottom part requires a little more explanation as it consists of both areas of flat color (the left side of the graph) and a photograph (the bottom part of the girl). If we save this as a JPG, the graph lines will lose their clarity and if we have this as a GIF, the file size would increase (because of the “photograph” part). We decided to create both GIF and JPG versions. It turned out that the JPG was only 500 bytes lesser than the GIF but it was blurring the lines in the graph a bit so we decided to go along with the GIF file format.

I mentioned that these four elements (3 images and text) have been placed inside an HTML table. Let me show you how we achieved this. I will set the TABLE BORDER attribute to “1” to demarcate the four table cells.

Current weight: 80 kgs

And here is the HTML code

<div align="center">
	<table width="275" cellpadding="0" cellspacing="0"
	border="0">
	<tr>
	<td width="155" valign="bottom"><img src="blank.gif"
	width="155" height="1" border="0" alt="" />
	<br />
	Current weight: <strong>80 kgs</strong></td>
	<td width="120" valign="bottom"><img src="graph_top.jpg"
	width="120" height="92" border="0" alt="" /></td>
	</tr>
	<tr>
	<td colspan="2"><img src="graph_bot.gif" width="275"
	height="108" border="0" alt="" /></td>
	</tr>
	</table>
</div>

You can extend the same idea for web page headers that contain both photographs and a navigation menu with simpler images.

Your comments

IMPORTANT Have a question / problem? Click here to ask an expert.