Pixel Anatomy 101

Now here's the same image saved as a Jpg, and optimized to be as close to the same file size as possible to our first Gif example. File size = 1.05kb.

Notice any difference? Yup, I thought you would.

What you're seeing here is the product of the type of compression Jpg uses. It has a problem with images that don't contain gradual colour blends (also known as 'continuous-tone'), and this monster is what it produces.

That's where the difference lies between these two image formats:

• Gif uses a 'lossless' compression method. No data is unintentionally removed from the image's colour palette during compression. You have 100% control of the quality and the file size. And Gifs can always be re-edited without the image quality suffering.
• Jpg uses a 'lossy' form of compression, whereby it removes data from an image that it believes is 'ok' to remove. Usually the high-tones in a photo/image are the first things it removes, causing the image to lose its clarity. And once you've applied the Jpg compression to an image, re-editing that image and compressing it again will further remove its clarity, thus destroying its usability more each time.

The Gif format is best used for graphics that contain large flat colour areas and text, with very little or nothing in the way of smooth colour blends, such as gradients. There are, however, certain situations where this is not the case -- we'll cover those a little later.

In order to create a subtle colour blend using the Gif format, you'll have to apply dithering to your image. And that will end up increasing the number of colours the image contains, which will directly affect the image's file size, and therefore download time. Sometimes, however, you may not have any other option, in which case a slightly larger file size would be a good trade-off to presenting an ugly graphic. Finding a happy medium will be your challenge, and your decision when the time comes. And that's all part of being a good Web graphics designer.

What's a Jpg Good For?

Jpg, on the other hand, loves to optimize graphics that are either photographic in quality or contain large amounts of subtle colour graduations -- these are known as 'continuous tone' images. In fact, that's what it was originally created for. And it does it very well, while compressing an image up to 100 times its original file size.

Gifs can't compete with that! And Jpgs can't compete with Gifs for creating clean, bold, flat coloured illustrative-type graphics that contain text, while keeping the file size to a minimum.

That's the basic and major difference between these two most commonly used Web image formats. Below is an example of how much better the Jpg format deals with subtle graduations over the Gif format. Here we have an image saved as a Jpg using a 60% compression ratio. File size = 5.30kb. Notice the subtle loss of clarity?

And here is the Gif equivalent optimized to be a similar file size - 5.06kb. Quite a difference.

These examples may seem a bit extreme, but they show you what the raw difference is between the two formats. So as you can see, each format has its strong and weak points. Let's just be thankful we have both!