Pixel Anatomy 101

5) What to do When Good Jpgs go Bad

You might be wondering if it would be a good idea to save those 3D buttons above as Jpgs instead of Gifs, given the fact that Jpg compression works better on images with subtle colour blends.

Well, this is indeed a viable option. However, in my experience I've found that, with certain types of gradient effects, Gif is the right choice to make.

Here's a Jpg version of the above diagonal gradient effect. The quality is not only a little better than the previous version, but the file size is a lot smaller too -- only 99 bytes (less than 1 kb!). So in this case, yes, Jpg worked better. Why? Because in this case the gradient effect is continuous throughout the image. There are no really solid, flat areas of colour, other than the drop shadow, and Jpgs can handle this type of image well.

What Jpgs do not handle well is the case where images contain areas of flat, solid colour, and subtle gradients in other, limited areas. We'll refer back to this 216 Web palette image from a previous section: this is the original Gif version.

Here you'll notice that this particular image has both solid areas of colour and a subtle gradient effect as well. It's in this instance that the Jpg format wouldn't yield the best results. The image below is a 'zoomed in' example of how Jpg compression handles images that contain a combination of both solid and continuous tone colour schemes. I compressed this Jpg to be almost the exact same file size as the Gif version, and this is what happened.

See how Jpg compression created blurred anomalies around the red letters, n the flat coloured area behind the number, and within the shadow? The gradient areas look ok for the most part, but we need the entire image to remain clean and sharp, not just the colour blends.

So in this case, Gif wins on quality -- and even if the file size increased a little, it would still be the better choice.

6) Remember: Jpgs are not Forever

Gifs, on the other hand, are recyclable.

Jpg uses as compression format known as 'lossy'. Gif uses what's called 'lossless' compression (as does the Png format), in which no data is removed from the original image palette once it's saved.

Lossy compression means that every time you save an image or photo as a Jpg, the compression method (or algorithm) removes certain data from the image. What it removes are details that it believes the human eye will not miss if they're taken out. And for the most part, it's true. That's why Jpgs look as good as they do when they're used for photographs and complex, continuous-tone art work.

Once you've saved an image as a Jpg, however, you can't open it up in your graphics program again and expect to get the same quality results as the first time you saved it. Each time it's re-opened and saved the quality gets worse, until, at last, it's no longer savable. So make sure, if you plan to re-edit anything you've saved as a Jpg, that you've saved a copy of the original photo or art work. That way you'll have the best possible graphic quality to start over with.

I've noticed that highlights are removed first before darker tones with lossy compression. This can result in a loss of clarity or sharpness in a photo, as well as a subtle overall darkening of the photo if it's compressed too much. And this effect is also what produces blurred anomalies in gradients.