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.
Repeated patterns
Any type of repetition is compressible. The GIF is much smaller than the JPEG.
| Image 1 | Image 2 |
| GIF | JPEG |
| 6.7 KB | 12 KB |
 |
 |
Large color blocks
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 first image is GIF and is 2 KB. The second image is JPEG and is 5 KB.
| Image 1 | Image 2 |
| GIF | JPEG |
| 2 KB | 5 KB |
 |
 |
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 that 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.
What is a continuous tone image?
If you can see the boundaries between subtle changes in color, then it is not a continuous tone image. In these pictures, the blue background should flow from one tone to another. In the lower quality pictures, the background is blotchy; it is easy to see where one shade of blue stops and another starts.
I reduced image 1 to 16 colors, and then saved it as a JPEG. (Technically, a JPEG never has less than 16 million colors, so I will not say that this image has only 16 colors.) I reduced image 2 to 256 colors. And the last picture is the original.
Image 3 is a continuous tone image; the others are not.
Image 1–not a continuous tone image
Image 2–not a continuous tone image
Image 3–a continuous tone image
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. The difference in the small images is subtle when you are not looking closely. However, if you look at the edge between the red and blue, you will see it is blurry in the JPEG. In the blow-ups, it is obvious which image is JPEG and which image is GIF.
| Image 1 | Image 2 |
| GIF | JPEG |
 |
 |
Image 3 – GIF
Image 4 – JPEG
Transparency
| Image 1 | Image 2 |
| GIF | 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. Notice the unnatural blocks of color under the eyebrow and to the right of the eye in the GIF. The lower eyelashes are also better looking in the JPEG. (It is also interesting to note that the GIF is 56 KB and the JPEG is 17 KB.)
Image 1 – GIF
Image 2 – JPEG
