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.