Introduction

Unless you opt for an ultra-minimalist text-only approach to your web site, it will contain graphics of some form, be they simple buttons for links or digital photographs. Most good image packages on the market provide support for dozens of files formats, but most of these are not suitable for the Internet. The practical dilemma facing most web developments is one of size versus quality: how long will your visitor be prepared to wait for that high-quality photograph to download? Most probably not very long at all, we live in impatient times.

In general I live by the '100k Rule', I never allow a single page to weigh more than 100k, including all associated code and graphic files. In reality it may not be possible to compress code, but you can optimise your graphic content. I will discuss this in detail in the future, but firstly here is an introduction to the main graphic formats for the Net.

JPEG (pronounced "jay peg")

JPEG offers the best range of options between quality and size, with most image editing programmes offering a sliding scale between the two. JPEG uses 'lossy compression', meaning your image will degrade in content, so JPEG is not an ideal solution for storing quality images in the long term, but is ideal for images, especially photographs, for the Internet.

Browser support for JPEG is excellent, in fact no browser on the market today should have any problem displaying the format. JPEG images have far more colours than the 256 of GIF images, and for this reason JPEGs should always be used for the displaying of photographs online. I still manage to find sites using GIFs for this, please don't, they look awful. There is no set rule for how big your image file should be, try to get it at the lowest acceptable quality setting that you will settle for, and then accept that file size. If the page weight is approaching 100k, you may have to lose some graphics altogether.

CompuServe GIF

GIF images are best suited for graphics such as icons, logos on buttons on your site. Their main advantage is the ability of the image to be placed on a transparent background, a bit like being printed on plastic acid tate that allows the element behind the image to show through. JPEG's are unable to do this. The other advantage that GIF has over JPEG is that GIF images retain their crispness, they do not suffer lossy compression, to compress a GIF you simple lessen the amount of colours in the image.

Unfortunately, the GIF format only supports 256 colours or less, so they are unsuitable for photo-quality images. As with the JPEG format, browser support for the GIF format is excellent and you should not have any compatibility worries. GIF also possesses a gradual download effect, called 'interlaced', which delivers the image in low-res versions first.

The real ace card for GIF images is the ability to animate them. There are many packages available to do so, some are available to download online for free. Unfortunately many sites have only utilized this animated format for banner ads, there are far more interesting effects to be explored! This is an interesting area that I plan to explore further in a future article.

PNG (Portable Network Graphic)

PNG is the new kid in town, a patent-free alternative to the GIF format. Supported by the World Wide Web Consortium, PNG offers some advanced features that make it a promising alternative to GIF for the future.

PNG allow the web designer to create true transparency in the graphic, where the actual colours of the graphic may be translucent allowing the content below them to show through. This feature is not support by GIF. Furthermore, PNG is not limited by a 256-colour palette, it offers support for full 24bit colour.

Unfortunately, PNG suffers from two setbacks that prevent it from becoming widespread in use. Firstly is does not support animation, secondly it's browser support before Version 4 of IE and NS is none-existent, while after that is patchy at best. In tests that I have carried out the only browser that fully supports the PNG format is Netscape 6. Looks promising though, definitely one for the future.

---

Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2001, but is left here for archival purposes.