Cleaner, Sharper GIF, JPEG, And PNG Images

JPEG At A Glance

Strengths: File size, range of colour.

JPEG is an extremely good format for the compression of natural looking images into a very small size. The quality level of a JPEG can be user-selected when the JPEG is created, allowing for a compromise between file size and image quality.

Because JPEG uses natural colours, rather than a palette, it is very suitable for images that contain smooth or natural colour gradients, textures, and patterns, such as those found in real life. JPEG excels when used for photographs, where the areas of colour are smooth and natural, and blend into each other.

Weaknesses: Compression artefacts, speed and lack of transparency.

JPEG's compression isn't perfect. In fact with some types of images it is far from perfect. As a lossy compression algorithm, there are some compression "artefacts" — slight faults in the decompressed image. If JPEG compression is used correctly, and in the correct circumstances, these artefacts aren't noticeable at all.

Incorrect use of the JPEG format. This has been magnified 3 times to exaggerate the effect of the JPEG artefacts. Mosquito noise can be seen around the text, and JPEG block noise can be seen inside the blue square. Because of the flat areas of colour, this image should have been compressed using GIF or PNG.

JPEG uses a more sophisticated compression algorithm, and naturally this takes a little more time to compute. This is usually not a problem any more. One other slight disadvantage of JPEG is that it is unable to include transparent areas.

PNG Perfection

If used correctly, a GIF or PNG image will always do what you want it to. First, you have to make sure the image you're using is suitable for the format.

How to tell if an image is suitable for the GIF or PNG format

When saving an image for the Web, it is better to use a paletted image than a true colour image. This is because each pixel in a paletted image uses at most one third of the bandwidth of a pixel in a true colour image.

This palette has a maximum of 256 colours. Therefore, a good rule of thumb is to look at an image and to try and decide whether it would reduce to 256 colours or less in a favourable manner. When you're making this decision, remember that any smooth gradients in colour, or smooth edges in shading, will have to be divided up into bands of colour, and each of these bands would take one palette entry. With a little bit of practice, it becomes easy to tell if an image would look good as a GIF or PNG.

If an image is natural, like a photograph, it will have a large number of arbitrary colours. In this case, it is not likely to look good as a GIF or PNG, unless it's very small.

Try it and see

Remember, whether you output the image as a GIF, PNG or JPEG, you need to ensure that you keep a copy of the uncompressed image. Exporting the image to the GIF, PNG or JPEG format should only occur as the very last step before the image is published, as further editing after this moment is likely to noticeably degrade the quality of the image.

Keeping a copy of the uncompressed image will allow you to re-compress the image in a different format or number of colours later.

Reducing the number of colours

When you save an image in paletted format, your graphics application will require that you reduce the number of colours. Most applications can save the final GIF or PNG with a choice of 256, 16, or 2 colours. Adobe Photoshop’s ‘Save for Web’ feature is ideal for this purpose, as it gives you a great amount of control of your finished file. Photoshop refers to a paletted PNG as ‘PNG-8’ and a true colour PNG as ‘PNG-24’. Choose ‘PNG-8’ or ‘GIF’ compression.

There are two ways to reduce colours in an image. One is a 'nearest colour' or ‘no dither’ method, where each part of the image is matched to the nearest colour in the reduced colour palette. The other method is called 'dithering' or 'error diffusion'.

It can be very tempting to use dithering or error diffusion. Error diffusion tends to look quite good in some circumstances. However, the point of error diffusion is to cover up for the inadequacies in the small palette by 'simulating' gradients with random (or patterned) noise.

When you're optimising a GIF or PNG for Web display, the 'nearest colour' method should usually be chosen. This creates a smaller file size, and a cleaner looking file. If the image looks too banded using this method, you should consider increasing the size of the palette or using JPEG compression, before you try error diffusion.

Correct use of the GIF or PNG format. Some detail in this image has been lost when we reduce the number of colours to 16. It would probably be best to save this file with more than 16 and less than 256 colours.

Top-down design for GIF or PNG images

If you're creating an image that you later intend to use in a GIF or PNG file, it is often a good idea to take steps to optimise the image in the creation stage, before you've finished creating the image. For example, as you create the image, it's best to avoid too many textures or gradients. Drop shadows can be used, but for best results, try not to soften the edges of the drop shadow by more than two or three pixels. Try to design using geometric, solid areas rather than soft edges and intricate details.