Image File Formats
Choosing the right file format to save your images in is of vital importance. There are three image formats in constant use on the net — GIF, JPG and PNG. Each is suited to a specific type of image, and matching your image to the correct format should result in a small, fast-loading graphic. Saving and exporting into these formats will require a decent image editor.
When choosing the format for your image, you should always be conscious of both the image’s quality and filesize.
This page was last updated on 2012-08-21
GIF — Graphics Interchange Format
Compuserve’s 8-bit GIF format has long been the most popular on the Internet, mainly because of its small size. It is ideal for small navigational icons and simple diagrams and illustrations where accuracy is required, or graphics with large blocks of a single colour. The format is loss-less, meaning it does not get blurry or messy. GIFs use a simple technique called LZW compression to reduce the filesizes of images by finding repeated patterns of pixels, but this compression never degrades the image quality.
GIF files can be saved with a maximum of 256 colours. This makes it a poor format for photographic images. Because this can sometimes be tight, GIFs have the option to dither, and will mix pixels of two different available colours to create a suggestion of another colour.
GIFs can be animated, which is another reason they became so successful. Most animated banner ads are GIFs. You will need an animation program to make your own animations.
GIFs allow single-bit transparency, which means when you are creating your image, you can specify one colour to be transparent. This allows the background colours of the web page to show through the image.
GIFs can also be interlaced, which is a way of saving a graphic so that it loads progressively — first a blurry, low-detail version is loaded, and then successive layers of detail are added. This usually means a larger overall filesize, but it means that a version of the image gets placed onto the viewer’s screen much quicker, and so is beneficial in many situations, as it gives the impression of a speedier download.
GIFs (variously pronounced “gif” or “jif”) are a very good format for most of the graphics you’ll be using on your site, though PNGs below are better in many regards. Experimentation is the key to success.
GIF Examples
This first image is indicative of the optimum properties of a GIF image — small, low on colours, and containing large areas of continuous colour.
This is the same graphic, but the number of available colours has been reduced. The filesize is improved, but it doesn't look quite as smooth. To remedy this, we can add some dithering (which does add a bit to the filesize), to produce the image on the right. The loss of colours becomes less obvious, and the filesize overall is about half as big.
This is the same image again, but with the red background colour set to transparent. As you can see, the background of the page shows through, but the edges are jagged, as this image was not designed for this background colour.
Finally we have a rather rubbish animated GIF that I just knocked up in ten minutes. Hooray. This single GIF file simply contains many frames of animation, which your browser shuffles through.
JPEG — Joint Photographic Experts Group
The 16-bit JPEG format (usually written without the E), was designed with photographs in mind. It is capable of displaying millions of colours at once, without the need for dithering, allowing for the complex blend of hues that occur in photographic images.
JPGs use a complex compression algorithm, which can be applied on a sliding scale. Compression is achieved by ‘forgetting’ certain details about the image, which the JPG will then try to fill in later when it is being displayed. You can save a JPG with 0% compression for a perfect image with a large filesize; or with 80% compression for a small but noticeably degraded image. In practical use, a compression setting of about 60% will result in the optimum balance of quality and filesize, without letting the lossy compression do too much damage.
Though JPGs can be interlaced, they lack many of the other special abilities of GIFs, like animation and transparency; but as I said, they really are only for photos. Simple graphics with large blocks of colour should not be saved as JPGs because the edges get all smudgy.
The » JPEG (“jay-peg”) format is likely to be replaced at some point in the future by the updated JPEG2000 format.
JPEG Examples
 0% compression |
 60% compression |
 80% compression |
 99% compression |
PNG — Portable Network Graphics
PNG is a format » invented specifically for the web in response to a licensing scheme introduced which meant the creators of any software that supported the GIF format had to pay five thousand dollars for the privilege (this tax has since expired). While they were at it however, the creators of PNG (“ping”) went ahead and created a format superior to GIF in almost every way.
One version of the format, PNG-8, is similar to the GIF format. It can be saved with a maximum of 256 colours and supports 1-bit transparency. Filesizes when saved in a capable image editor like FireWorks will be noticeably smaller than the GIF counterpart, as PNGs save their colour data more efficiently.
PNG-24 is another flavour of PNG, with 24-bit colour support, allowing ranges of colour akin to a high colour JPG. PNG-24 is in no way a replacement format for JPG, however, because it is a loss-less compression format. This means that filesizes can be rather big against a comparable JPG.
PNG’s main draw are alpha-channels. Instead of the rudimentary transparency options in other formats (where a pixel is either transparent or opaque), an alpha channel can specify the opacity of any pixel from 0–255, where 0 is fully transparent and 255 is fully opaque. This allows you to create a graphic that can be placed on top of any background colour and will retain a translucent effect, with the background showing through the pixels that are not opaque.
The problem with this — and there had to be one — is that IE6 doesn’t support alpha-channels. Once a new version of IE comes out with this vital support, you should see the effect springing up on trendy designers’ sites across the web.
And what of animation? PNG can be made into multi-image files through the MNG extension of the format, but browser support is patchy for this format. Stick with GIFs for your animations.
Where does all this leave the PNG format? It may take a good number of years to find widespread usage, but as it stands at the moment using PNG-8 in place of static GIFs will lower the filesizes of your images. There’s no reason not to adopt them now as the format you create your site icons with.
