Using GIF and JPG in one image?

Using GIF and JPG in one image? cover image
  1. Home
  2. Graphics
  3. Using GIF and JPG in one image?

Graph top
Current weight: 80 kgs
Graph top
Graph bottom

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”:

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

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.

Blank
Current weight: 80 kgs
Graph top
Graph bottom

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.

Graphics Images & photos