Cleaner, Sharper GIF, JPEG, And PNG Images

While they're not absolutely necessary for Website functionality, images help improve the appearance of a site. With a few good quality, highly optimised images, you can give your site the edge it needs to leave a lasting impression. The problem is that many Webmasters, both novice and experienced, don't feel confident when it comes to creating clean looking graphics and optimising them for the Web.

On the Web today, GIF, PNG and JPEG are the most common and widely-supported image file formats. But which should you use? Well, this question is impossible to answer without a few extra considerations. In this article, we'll look at some of the important differences between GIF, PNG and JPEG images, and discuss how you can get the best quality from all your Web graphics.

The Struggle Between GIF and PNG

The GIF and PNG formats are ideal for compressing graphics that contain flat areas of plain colour, as well as text.

The Faithful GIF

For many years, the only data that flowed in and out of our modems was text: ASCII text. A modem's primary job, once upon a time, was to send and receive letters, numbers, and 66 other assorted characters.

This isn't particularly surprising if we consider that computer graphics displays were rare, and modems were so slow that they took 3 to 4 seconds to transmit a single sentence.

The GIF file format, created by Compuserve in 1987, was designed to fit as much image information as possible into the smallest space. It uses a loss-less compression algorithm (LZW) that is not uncommon today.

The colours in a GIF file are indexed in a palette. Originally, computer graphics displays could only display a certain number of colours at once, due to memory and speed. These colours were called the palette. Originally, graphics adapters were two-colour (black and white). The CGA's graphics modes could reach a maximum of 4 colours, the EGA gave us an impressive 16, and the VGA a stunning 256 colours all at once. The colours that were displayed by the graphics card were not identified by their actual colour, but instead, by an index number, which referred to one of the colours in the palette. This saved a lot of display space, and still allowed a selection of colours to be used.

The Innovative PNG

The PNG image format was developed as the successor to the GIF format. The original acronym comes from the words “PNG’s Not GIF”, though the format is now best known as the Portable Network Graphics format.

The PNG format was developed in 1995 in response to two major problems with the GIF format. The first, and most immediate problem was that in 1995, Unisys and Compuserve announced that software implementing the GIF image format would be subject to royalties, based on a patent held by Unisys on the LZW compression algorithm used in the GIF format. GIF is technically not free. The second problem with the GIF format was that its feature set was limited, and the need for images with features such as 24 bit colour or 8 bit alpha channels was increasing.

PNG supports a more efficient compression algorithm than GIF, is patent-free, is capable of storing more image formats and includes some nifty error-checking features. When saving identical GIF and PNG images, the resulting PNG file will be 5% to 20% smaller than the GIF file.

From the point of view of a graphic artist, the PNG format is almost identical to the existing GIF format, yet it delivers a better compression rate and supports newer formats that GIF did not support. I now use PNG in every situation in which I would have used GIF in the past.

As the techniques for working with GIF and PNG images is so similar, I will discuss them in this article as if they were one format. The techniques for creating GIF and PNG images are basically the same.