When to Use GIF and JPEG Format

I have written several posts on image formats, their advantages and disadvantages. The one thing I haven’t really discussed is when to use a particular format over another. Depending on that type of image you have will determine which format you should choose. Most people may just choose JPEG, however, there are many times GIF may be more suitable.

I will explain when to use either GIF or JPEG with images using examples and comparisons between the two formats. Hopefully this post will help you make a more educated decision.

Differences Between GIF and JPEG

Note:

There are other image formats that a popular such as TIFF and PNG, but for the purpose of this post I will stay with GIF and JPEG.

Both GIF and JPEG have advantages and disadvantages that help dictate how the format is used. Both are compressed and are support by all Web browsers. I will provide a quick comparison between the two formats below.

Value GIF JPEG
Number of Colours Supported 256 16.7 million
Compression Type Lossless – No data lost. Lossy – Some data lost depending on compression setting.
Compression Artifacts No Yes – Depends on compression amount

Using the information above, I will now provide some examples on how best to use each format. For more detailed information about each format, as well as others, please read the post titled Overview of Various Image File Formats.

GIF and JPEG Comparison

For the comparisons I have chosen several images with different properties. Since all images aren’t the same, it is important to see how they are affected when saved to in the GIF or JPEG format.

Note:

All images displayed below were saved in Photoshop CS2 using the Save for Web option.

For the GIF images I reduced the number of colours in each image. For JPEG I modified the compression quality which ranged from 0% (worst) to 100% (best).

Example 1

In this example I will convert a Windows dialog box into both a GIF and JPEG. With the the image of the dialog you will notice that it has defined lines and a minimal number of colours.

GIF Format
Size: 3,112 bytes
Number of colours: 64
JPEG Format
Size: 11,969 bytes
Compression: 60%

As you can see, the GIF image comes out much sharper and smaller than the JPEG. I attempted to reduce the size of the JPEG to try and match the size of the GIF, but I dropped the compression quality to 0%, and the JPEG was still larger than the GIF. Below is the result of the JPEG image at 0%.

JPEG Format
Size: 5,511 bytes
Compression: 0%

A very ugly image with severe JPEG artifacts. An image like this should not appear on a Web site if you want to convey a professional appearance.

Example 2

So we looked at an image with a limited number of colours. Now we will look at an image that is an actual digital photo that can contain over 16.7 million colours.

GIF Format
Size: 85,046 bytes
Number of colours: 256
JPEG Format
Size: 49,946 bytes
Compression: 60%

The result of this image is a complete opposite of the image in the first example. Since the image contains millions of colours, I increased the number of colours in the GIF image to display the maximum of 256 colours. Unfortunately, these aren’t enough colours. If you look closely at the water around the boat you can see some banding of the blue water, meaning the shades of blue don’t blend nicely. You don’t see this in the JPEG image.

Also notice that even though the GIF has much less colours displayed, the file is about 36,000 bytes larger. The image below shows what the image would look like if I attempted to make the size of the GIF file match the JPEG.

GIF Format
Size: 44,389 bytes
Number of colours: 32

Not a very nice looking image. The colours were reduced to 32 resulting in lost of detail and even more banding than the original 256 colour GIF.

Summary

This post has provided two examples of different images, one with a limited number of colours and a second with millions of colours.

For images with sharp lines and a limited number of colours, such as icons, logos and dialog boxes, GIF is the best format to choose. JPEGS are much larger and would display artifacts to obtain the same file size as a GIF image.

Images that contain millions of colours, such as a digital photo, JPEG is the best choice as it can handle millions of colours. The 256 colour limitation of the GIF format results in colour banding, or a lost of detail entirely. The GIF image would also be larger than the JPEG image.

6 Responses to “When to Use GIF and JPEG Format”

  1. Paul says:

    @Sumit: If you have the original uncompressed version, you can just use an image editor to save it as a GIF. If you don’t have the original, you can try uncompressing and then converting the image.

  2. sumit says:

    Heyy….really great post…..But Could You help me a bit…..I compressed a image using my LZW compression program for data….i.e. say an image with .LZW extension…How would I make it a GIF image?….For sure headers are to included…but could you help me out with this…I’m new to Image compression and have never worked on changing formats…

  3. Paul says:

    @Martini: I’ll look into writing more about GIF in future posts.

    @gLf: I try to keeps things simple here. I try to strip off the very technical explanations and get down to the real points.

  4. gLf says:

    Thank you very much for explaining the differences in such a simple way!

  5. Martini says:

    Hey Paul, that was a really great post. I learned a lot in college, but what you posted here was not part of my brain knowledge. Nifty. Thanks.

    Maybe you can do a post one day about animated GIFs.

  6. Louie says:

    I was just wondering since I am no photoshop expert, when I save an image as GIF, what does the interlaced option mean? and how is this different from PNG? maybe it’s for another topic. Thanks for the article 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.