While they're not absolutely necessary for Website functionality, images help improve the appearance of a site. By using a few high quality, highly optimised images on your Web pages, 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 and JPEG are still the two most commonly 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 and JPEG images, and how to get the best quality from all your Web graphics.


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 lossless 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 being 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 Space-Age JPEG

JPEG, on the other hand, is a much more recent invention. It uses a more complex compression algorithm that just would have taken too long to compress/decompress on the earliest computers.

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

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?
Strengths

Speed, sharpness, solid colour and transparency.

Because the compression algorithm used by GIF images is a lot older, and more basic, it takes next to no time for your computer to decompress and view it. With the speed of modern computers, this is not the issue it once was.

Because a GIF's compression is lossless, once it has been reduced to a colour palette there is absolutely no further degradation in quality or sharpness. The GIF can be decompressed, edited and re-compressed, and the image will still be as sharp as the day it was created.

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

One palette entry of certain type of GIF image (a 'transparent GIF') is reserved for transparent areas. Instead of showing a particular colour, all instances of that palette index appear invisible, revealing whatever the GIF is shown in front of. This can be handy when a GIF is reused in front of a number of different backgrounds on your site. The image doesn't have to include the background, it just lets the background "show through".

Weaknesses

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

Size is an obvious one. GIFs aren't good at compressing complex images. Unless an image has been specifically optimised for the GIF format, a very large GIF image can take up 2 to 10 times the space of a JPEG of the same area. This is why GIF is typically restricted to smaller images on the Web today, in addition to images that are particularly suited to GIF 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 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 the 256 colour GIF palette. At worst, this could cause excessive artifacts such as dithering or banding, which will be discussed later.


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 artifacts, 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 "artifacts" -- slight faults in the decompressed image. If JPEG compression is used correctly, and in the correct circumstances, these artifacts aren't noticeable at all.

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


GIF Perfection
I'm a big fan of the humble GIF. If used correctly, it will always do what you want it to. First, you have to make sure that the image you're using is suitable for the GIF format.

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

Keep in mind that a GIF image has a palette of colours. 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, etc, 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.

If an image is naturalistic, 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, unless it's very small.

Try it and see

Remember, don't reduce the number of colours, or save the image as a GIF or JPEG, until you've backed up the full colour image and you are ready to take the last step. When you back up your images, you should save the image in full colour, before any compression, or reduction in colours, takes place. This 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 as a GIF, your graphics program will automatically require that you reduce the number of colours. Most applications can save the final GIF with a choice of 256, 16, or 2 colours.

There are two ways to reduce colours in an image. One is a 'nearest colour' 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 for Web display, the 'nearest colour' method should almost always 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 trying error diffusion.

Top-down design for GIF images

If you're creating an image that you later intend to use in a GIF 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, when you create an image that's intended for GIF compression, it's best to avoid too many textures or gradients. Drop shadows can be used, but for best results, try not to blur the shadow by more than two or three pixels. Try to design using geometric, solid areas rather than intricate details.

Antialiasing

Antialiasing is a complex procedure, and differs according to the application you use. I won't go into great depth about antiailiasing here, but let's take a breif look at it.

Antialiasing is a technique used to smooth the edges of curved objects, or objects with angled sides. One way to antialias an image is to create the image at a higher resolution than you require for the final resolution, and then downsample the image to smooth it.

Please note that most recent graphics applications allow you to antialias an object or text when you place that object in the graphic. If you use this method, there's no need to use a higher resolution than the final intended resolution. This is a much better way to antialias, as it is allows you to align the straight edges of objects with pixel boundaries -- placement is therefore more accurate.

Please note that small text, such as text of 16 pixels in height or less, sometimes looks better when it is not antialiased, depending on the type of text and method of antialiasing that you use.


The Stunning JPEG
For larger and more natural images, JPEG is a great format. It is flexible and it requires a lot less work or forethought than a GIF image. In short, it's easy to use.

All you need to do to save a JPEG is click on 'save' and choose 'JPEG'.

What's the level of detail?

Most applications will let you choose a compression level for the JPEG. This is usually found in the same 'Save As' dialog box.

Because JPEG is a lossy compression format, it will reduce some details in the image. The trick to getting the best JPEG on the Web is to get the best compromise between visual image quality and file size. The higher you set the compression level, the lower the quality, and the smaller the file size. A value of 8 to 16 is usually good for the Web.

Are you sure you're using the right format?

One of the most common mistakes is to use JPEG for an image that would be more suited to the GIF format. Often, images such as logos, text, graphs, headings or buttons will be constructed using a limited number of solid, sharp areas of colour. If your graphic is as basic as this, and you use the JPEG format, the compression artifacts are likely to become visible in the solid areas of the image, particularly surrounding details and lines. This is sometimes called 'ghosting' or 'ringing', and is certainly not something you want to appear on your company logo!

If you suspect that the inadequacies of the JPEG format will show up in some of the solid areas of your graphic, try compressing that image using GIF and see how it compares (both in file size and quality).


Inspecting your final image
To fully evaluate your image, after you've converted it to GIF or JPEG, you will need to reload the image in your graphics application to ensure that you are viewing the compressed, final product. Make sure you're using a 24-bit colour display, so that you can better see actual features of the image.

Zoom up!

Using the zoom tool, look for small details that could be fixed up. In a GIF file, look for banding. If you did use error diffusion, inspect the image areas under a high zoom to ensure that there is no noise in the large, solid areas. Noise should only appear in gradient areas or areas with detail. In a JPEG file, look for ringing artifacts in the solid areas. Remember that a JPEG file has been optimised to look best at 100% zoom, so it is not unusual for degradation in quality to become more obvious when you zoom in further.

Try other formats

I highly recommend that after you've inspected your image in its final compressed form, you go back to the uncompressed image and see if you can try a different format, or number of colours, or quality. To get the best quality and most highly optimised images, I often find myself trying a number of different formats before I'm satisfied.


Conclusion
In this tutorial, we've discussed some of the basic concepts of GIF and JPEG images. There's a lot more to learn about these formats, such as transparency in GIF images, matching colours with background or cell colours, and using custom palettes.

However, I hope I've given a reasonable introduction to optimising GIF and JPEG images for the Web. Good Luck! By Thomas Rutter