HunterThinks.com: Graphics and Visuals

Free subscription!

When to use GIF or JPEG

Posted: 20 July 01 | Last modified: 20 July 01

Conclusion

While there are no universal truths dictating when to use GIF or JPEG, you should tend to use GIF when working with text and geometric shapes or if you need transparency, but tend to use JPEG when working with continuous tone images. Of course, the licensing issues with GIF complicate the issue even more.

What is GIF?

The GIF file format is based on LZW compression patented by Unisys. Oversimplifying the concept, LZW compression works best when data patterns are repeated. For example, if there are large areas of the image that are a single color, then the color is being repeated, therefore LZW compression will work very well.

The color palette for GIF is limited to 256 colors. Different programs deal with this problem in different ways, but dithering is usually part of the solution.

Legal issues

There may by legal/licensing issues regarding the use of GIF formatted images on your web pages. I am not a lawyer and I am not offering any advice or opinion on this topic. Unisys has an article on their website is more confusing than clarifying.

What is JPEG?

The Joint Photographic Experts Group developed the JPEG format to produce standards for continuous tone image coding. In other words, they produce standards for files (and the programs that read and create those files) that have lots of different colors and shades. As opposed to image files that use few colors, such as cartoon art.

JPEG also uses compression, but chooses amongst different methods based on the program that creates the image.

The color palette for JPEG is 24-bit (vs. 8-bit for GIF). You will find this referred to as true color sometimes.

Hard edges

In general, use GIF for hard edges, such as geometric shapes and text.

Transparency

Image 1 Image 2
GIF JPEG
Transparency in a GIF No transparency in a JPEG

JPEG cannot have transparency; GIF can. Transparency allows you to specify that certain parts of the image have no color. The color of the element that contains the GIF will be visible wherever the GIF is marked as transparent.

Image 1 has a transparent area and therefore looks more integrated with the table. (The table is the entity that contains the GIF. I added bgcolor="black" to the two table cells containing the images. This was to force a contrasting background color to the image.) The JPEG version has a border of white because it cannot preserve transparency.

JPEG is for photographs

Since most photographs are sophisticated enough to have continuous tone, a good rule of thumb is to use JPEG for your photos.

Tip Jar iconPlease leave a small tip in the tip jar if you learned something.

Comments?

Send an email to comments@hunterthinks.com.