Cleaner, Sharper GIF, JPEG, And PNG Images

The Space-Age JPEG

JPEG is ideally suited to graphics derived from photographs, as it is very efficient at compressing natural looking images.

JPEG uses a more complex image compression algorithm than GIF and PNG, and requires greater understanding by graphic designers. JPEG is relatively new, compared with loss-less compression such as that used by GIF. The algorithm used to compress JPEG would simply have taken too long to compress or decompress on the earliest computers.

JPEG actually uses a 'lossy' algorithm. Rather than recording an image like a computer, it records an image more like a human would describe it. It looks for areas, patterns and colours, rather than simply describing each pixel separately.

The actual compression algorithm is based upon a discrete cosine transform (DCT). This mathematical transform is similar to the algorithms now used in motion picture sound, DVD video, and the common MP3 audio.

What good is a GIF or PNG?

Strengths: Speed, sharpness, solid colour and transparency.

Because the compression algorithm used by GIF and PNG images is a lot simpler than the one used for JPEGs, it takes less time for your computer to decompress and view. With the speed of modern desktop computers, this is no longer the issue it once was.

Because a GIF or PNG’s compression is loss-less, once it has saved there is absolutely no further degradation in image quality or sharpness. The image can be decompressed, edited and re-compressed, and will still be as sharp as the day it was created.

GIF and PNG images thrive on solid, contiguous colours. This is ideal for your corporate logo, or the solid areas and lines in your Website's navigation. The solid colours will exhibit no ringing, boxing or blurring at all.

GIF and PNG are both capable of binary transparency. Binary transparency allows each pixel in the image to be either completely opaque, or completely transparent. One palette entry of the image is reserved for transparent areas. Instead of showing a particular colour, all instances of that palette index appear invisible, revealing whatever the image is shown in front of. This can be handy when the image is reused in front of a number of different backgrounds on your site. The image can let the background "show through".

PNG further extends the functionality of GIF. While GIF images are limited to colour palettes of a maximum of 256 colours, PNG supports true colour images. PNG also supports another form of transparency called alpha transparency, in which each pixel can have a colour and a certain amount of transparency, letting the background show through partially in areas. There are some drawbacks to these additional PNG features, however, which will be discussed below.

While support for PNG images in browsers has been low in the past, basic PNG images can now be safely used in all modern browsers, including Microsoft Internet Explorer (4.0b1 and later, Mac and PC), Mozilla, Netscape (6.0 or later), Chimera (2.0 or later), and Safari. Netscape 4.04 supports PNG, but without transparency.

Weaknesses

Virtually all of the weaknesses of the GIF or PNG file format can be attributed to one of two factors: size and palettes.

Size is an obvious disadvantage. The GIF and PNG formats are not good at compressing complex, natural images. Unless an image has been specifically optimised for this format, a very large image can take up 2 to 10 times the space of a JPEG of the same area. This is why GIF and PNG are typically restricted to smaller images on the Web, in addition to images that are particularly suited to the format.

Palettes, when used in a Web image, can actually be of huge benefit. However, if they're not used well, they can be a nightmare. If the GIF or PNG image contains a smooth gradient or a smooth edge, the graphic designer must divide this area up into a finite number of different colours in order to fit within the limitations of a 256 colour palette. At worst, this could cause excessive artefacts such as dithering or banding.


Incorrect use of the GIF or PNG format. This image has been reduced to 16 colours (no dithering) in order to show the banding artefacts. These artefacts occur when an image that is too complex is saved as a paletted GIF or PNG. The original image has soft gradients, so a JPEG would have been much more suitable here.

It is possible to get around the palette limitation by using features available in the PNG format, which GIF does not support. When creating images for the Web, however, it isn’t yet practical to use either of these two new features of PNG, for a couple of reasons. Firstly, the support for PNG in Microsoft’s Internet Explorer browser is buggy, and is not yet capable of showing alpha transparency as it was intended. In addition to this, using a true colour image format or alpha transparency in an image consumes considerably more bandwidth, making it impractical for use over the Internet. At the moment, PNG can be used quite safely with paletted images, just like a GIF.