Cleaner, Sharper GIF, JPEG, And PNG Images

The Stunning JPEG

For larger and more natural images, JPEG is a great format. It’s flexible and requires a lot less work or forethought than a GIF image. In short, it's easy to use.

All you need to do to save a JPEG is click on 'save' and choose 'JPEG'.

What's the level of detail?

Most applications will let you choose a compression level for the JPEG. This is usually found in the same 'Save As' dialog box. Again, Photoshop’s ‘Save for Web’ feature is good at this. Select ‘JPEG’ as the compression method. You can change the compression level by using a preset or using the ‘Quality’ slider.

Because JPEG is a lossy compression format, it will reduce some details in the image. The trick to getting the best JPEG on the Web is to get the best compromise between visual image quality and file size. The higher you set the compression level, the lower the quality, and the smaller the file size. A compression level of 10 to 16 usually works well for the Web. In Photoshop, this corresponds to a quality level of around 60 or 70.

Are you sure you're using the right format?

One of the most common mistakes is to use JPEG for an image that would be more suited to the GIF format. Often, images such as logos, text, graphs, headings or buttons will be constructed using a limited number of solid, sharp areas of colour. If your graphic is as basic as this, and you use the JPEG format, the compression artefacts are likely to become visible in the solid areas of the image, particularly surrounding details and lines. This is sometimes called 'mosquito noise' or 'ringing', and is certainly not something you want to have appear around your company logo!

If you suspect that the inadequacies of the JPEG format will show up in some of the solid areas of your graphic, try to compress that image using GIF or PNG and see how it compares (both in file size and quality).

Correct usage of the JPEG format. This image looks reasonable when viewed at normal size, though some mosquito noise and blocking can be seen when we zoom in. Depending on your fussiness, you might like to increase the quality of this JPEG just a little bit.

Inspecting Your Final Image

To fully evaluate your image, after you've converted it to GIF, PNG or JPEG, you will need to reload the image in your graphics application to ensure that you are viewing the compressed, final product. Make sure that the computer you're using is configured to display colours in 24 bits (true colour), so that you can better see actual features of the image.

Zoom up!

Using the zoom tool, look for small details that could be corrected. In a GIF or PNG file, look for banding. If you did use error diffusion, inspect the image areas under a high zoom to ensure that there is no noise in the large, solid areas. Noise should only appear in gradient areas or areas with detail. In a JPEG file, look for ringing artefacts in the solid areas. Remember that a JPEG file has been optimised to look best at 100% zoom, so it is not unusual for degradation in quality to become more obvious when you zoom in further. Inspecting the image closely will give you a good idea about whether the compression should be increased or decreased, but keep in mind that the ringing or mosquito artefacts will not be as obvious when viewed at 100% zoom.

Try other formats

I highly recommend that after you've inspected your image in its final compressed form, you go back to the uncompressed image and see if you can try a different format, or number of colours, or quality. To get the best quality and most highly optimised images, I often find myself trying a number of different formats before I'm satisfied.

Conclusion

In this article, we've discussed some of the basic concepts of GIF, PNG and JPEG images. There's a lot more to learn about these formats, such as transparency in GIF and PNG images, matching colours with background or cell colours, and using custom palettes. In addition to this, we can do a few nifty things with PNG that we can’t with GIF.

However, I hope I've given a reasonable introduction to optimising GIF, PNG and JPEG images for the Web. Good luck!