When to save images in JPEG format

It amazes me how many websites I find with pixelated or dirty images. Even when a website designer is good at programming and clearly knows how to build a sound, fully-functional website, sometimes the site is let down by ugly graphics that have been created with a lack of basic experience and understanding about graphic design. But creating nice looking images is not all that difficult once you know a few important things.

JPEG vs. GIF

One of the most common problems I come across is the use of the wrong file type. JPEGs, or JPGs, make use of the full range of colors in the spectrum. That's 16 million of them according to most paint/graphics programs! This means you should always use JPEG format for photographs, to make sure that every single shade and hue in the picture is left intact. Too often I've seen photographs saved as GIF files. GIFs are great, but they only have a range of 256 colors available, and often that's not enough for a photograph. In general, use GIFs for logos as well as icons, diagrams, etc, and JPEGs for photographs. Take a look at this example:

The left-hand section is a JPEG, whereas the middle and right sections are GIFs. Clearly a full unrestricted palette is needed for this particular photograph, mainly because of the sky. You can sometimes get away with reducing a photograph to a mere 256 color palette, but whenever subtle gradients come into play – as with skies – you really start noticing the difference. The fade from dark blue to light blue uses a LOT of shades, way more than the GIF palette can handle. In this picture the sky alone uses 10,596 unique colors! – and that's not counting all the greens used in the rest of the picture. So it's not surprising that reducing the picture to a 256 palette is going to screw it up.

You'll notice that the middle section is decidedly worse than the right-hand section. The middle section was reduced to 256 colors using "Nearest Color" mode. That means a whole range of different shades of blue were lumped together as a select few shades, hence the distinctive horizontal banding. For the right-hand section I used the "Error Diffusion" method, which means that the available hues bled together and became mixed. In this example the effect disguises the horizontal banding and makes the sky look a little more natural, but still, the entire image is generally more pixelated throughout.

Check the filesize of the image

Apart from the obvious difference in visual quality, there's the filesize of the image to consider. Often GIF photos have bigger filesizes than their JPEG counterparts. If the entire picture above was saved as a JPEG then it would be 106 KB, whereas if it was saved as a "Nearest Color" GIF (as in the middle section) then it would be 117 KB – so not only much poorer quality, but a bigger filesize too! In contrast, saving it as an "Error Diffusion" GIF (as in the right-hand section) would put the filesize at a mere 69 KB – so a much more respectable filesize, but still not very good quality compared to the JPEG.

But the beauty of JPEGs is that they can be compressed. In fact, JPEGs are by definition already highly compressed images, but they can be compressed even more. The last example image, saved as a JPEG at 100% quality and the least amount of compression for the JPEG format, has a filesize of 106 KB. Just as an aside, the same image saved as a BMP (a very common format) comes out at 331 KB, over three times larger. Saved as a TIF it's 234 KB. Frequently these alternative image formats are not really alternatives at all when it comes to web pages; the filesizes are just way too big.

But I digress. Now that I've convinced you to use JPEG format for photos rather than GIF, take a look at this new example. You'll have to look very closely...

Each section has been saved in JPEG format. But the difference now is the compression factor. JPEGs are already highly compressed images compared to BMP and TIFF format; that's why they're ideal for websites. But JPEGS can be compressed even more, although the more you compress them, the more the quality suffers.

The left-hand section of the picture above remains at the lowest compression possible for a JPEG, otherwise known as "best quality JPEG" in some paint programs. In other words I've saved this left-hand section with a setting of 0, for zero compression, but in other programs it might be 100, for 100% quality. The middle section is saved at 15 compression (or 85% quality), and the right-hand section is saved at 50, which as you can guess is 50 compression and 50% quality. Clear?

Notice the difference between the sections. If you look hard at the middle section you'll notice what I call "dirtiness" starting to appear around the hard lines of the horizon against the sky. It's even worse in the right-hand picture. This is the problem with compressing JPEGs – they lose quality the more you compress them. But the difference in filesize can be pretty amazing:

Left-hand section: 0 compression, 100% quality, 106 KB
Middle section: 15 compression, 85% quality, 35 KB
Right-hand section: 50 compression, 50% quality, 18 KB

That's quite a difference! For websites, the norm is usually around 15 compression (85% quality), to get the filesize down whilst maintaining a fair degree of quality. Actually, at this standard setting, the dirtiness shows up more in flat, solid areas, but for the most part is barely visible. Take a look at these:

These are all saved at the usual 15 compression, and they're pretty respectable quality, especially the first which hardly shows any dirtiness at all. And at less than 10 KB each, these files are perfect for your website.

But now a word of warning: Keep a "best quality" copy of each file on your computer in case you ever need to edit them. Why? Because many, many people make the mistake of saving a JPEG at 85% quality, then later resizing or cropping it and saving it again at 85% quality. What's happening here is that the image is being reduced in quality each time; first to 85% of the original quality, then to 85% of the second already-reduced quality, and so on. If you keep that up you'll end up with an image that looks like this:

Awful, isn't it? And now you're thinking how many times you've seen poor quality images like this across the internet. It's often because people grab images from other websites to use on their own, but resize it a little to fit their page, and re-save it... and then someone else grabs that second image for their own website and makes more adjustments, and re-saves it again...

This is why you need to make sure you always keep 100% quality copies of your website images, so you can always edit and re-save from the original.

Finally, I should add that I'm in no way advocating the use of JPEG format over GIF at all times. On the contrary, GIFs are equally important for websites, and should be used instead of JPEGs in certain cases. Generally speaking GIFs should be used for logos, buttons, icons, diagrams, and anything else that doesn't require the use of 16 million colors. In fact, you should always weigh up the pros and cons of both GIFs and JPEGs before you save your image.

In time this choice will come naturally to you, but if in doubt, try saving your image in both formats and comparing them side by side. And before you opt for one or another, also check the file size and see which is smallest. See if you can spot the difference between the JPEG (left) and the GIF (right)...

Not much difference, is there? Sometimes GIFs are perfectly adequate for handling photographs. But the JPEG is 18 KB whereas the GIF is 25 KB. Not a huge difference, but it all adds up.

All articles:

Other subjects we're often asked about:

Website optimization study:

Omaha Steaks

When to save images in JPEG format

JPEG vs. GIF

Check the filesize of the image

Web Design

Information

Resources