WebDevelopersNotes logo

home-icon Home / Graphics / Using GIF and JPG in one image?

Using GIF and JPG in one image?

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

  • A transparent 1×1 pixel gif that has been resized.
  • The top image of the girl
    Graph top
    This is a JPG image.
  • The bottom image of the graph with the lower part of the girl’s body.
    Graph bot

    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
Graph top
Graph bottom

And here is the HTML code

<div align="center">
	<table width="275" cellpadding="0" cellspacing="0"
	<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>
	<td colspan="2"><img src="graph_bot.gif" width="275"
	height="108" border="0" alt="" /></td>

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

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Joke - Eat, Sleep and Code

Sponsored Links


How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]


The first iPod unveiled by Steve Jobs on October 23, 2001 was Mac-only. It had a 5GB hard drive that let you carry "1,000 songs in your pocket". The device cost a bit less than $400. The Windows iPod was introduced only 1.5 years later. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy