AbleDesign - Tutorials
Web Design Tutorials - Beginning Design Considerations
Image file formats: JPEG vs. GIF
The vast majority of graphics used on the Internet are either GIF or JPEG file types. Each has its own pros and cons. Without going into agonizing details, here are some of the important things for you to consider:
JPEG:- good for large images
- excellent for smooth, blended images
- no transparency options
- bad for straight lines such as text
- good for small images
- does not handle smooth color transitions well due to limited color pallette
- transparency options
- very good for straight lines such as text
- works well for stretching spacer images (image stretching)
You are probably wondering what good and bad uses of the JPEG and GIF formats look like. Consider the two images below:
 GIF Text (1,760 bytes) |
 JPEG Text (2,216 bytes) |
Notice that in order to get the JPEG file close to the size of the GIF file, significant blurriness is introduced around the edges of the letters (straight edges, or sharp color contrasts).
Now look at another example, a circle with a smooth color fade from center to outside edge:
 GIF Circle (3,567 bytes) |
 JPEG Circle (2,147 bytes) |
As you can see, with smooth color transitions, the GIF image becomes larger and much less detailed than the JPEG equivalent. The explanation is complex, but it basically comes down to the number of colors available to the different image formats and the compression algorithm they use. Unless you plan on making a career of graphics, you really don't need to know much more about it than that. There are plenty of other things to make your head ache over. Yes, we'll be getting to those!
A term was introduced above that you may not be familiar with -- image stretching. What is it? As alluded to above, it is often used to manually control spacing on the page by taking a transparent 1x1 pixel gif image and stretching it to the dimensions you want. This allows you to accurately align aspects of the page without relying on methods that are not consistently supported by different browsers. If you want to ensure that two page elements are exactly 120 pixels apart horizontally, you could stretch your 1x1 image like such:
<img src="/images/spacer.gif" height="1" width="120" border="0">
Another common use of stretched gif images is found on this page. If you look at the top and bottom of the page, you will see a horizontal blue border. Here are the two images that create the effect:
As you can see, there is very little there. The trick is stretching the image horizontally to fill the desired area, and designing the image in a way that will look good when stretched. In this case, a table was used to fill the width of the page and the image is repeated as the background of the table. What's that about making the image look good when stretched? Consider what would happen if it were repeated vertically instead of horizontally. The pattern would not repeat as desired. That's why this particular image worked well at only 1 pixel wide -- there is no pattern to worry about repeating.
There are things to be aware of when stretching images. One is that older browsers (mostly pre-version 4) do not support this practice. This is discussed in greater detail in the Browser Compatibility tutorial. It is worth pointing out here how important browser compatibility is. Here is an example:
What is the difference between that screen shot and what you see on this page? A very minor one. In the screen shot, the stretched image was made partially transparent (the cream colored portion) to blend seamlessly with the page background. This works on most platforms and browser combinations, but when displayed in Netscape 4.5 on Windows NT, resulted in the screen shot above. Eliminating the transparency in the stretched image was the obvious solution.
One last thing about images -- make sure to always upload (ftp) them to your server in Binary mode, as opposed to Ascii or auto-sensing modes.
