Pixel Anatomy 101

What is it about the Web that makes it so enticing? The flashy, spinning, dancing, endlessly colourful images? Or the never-ending cornucopia of textual information that is always just one click away, 24 hours a day, 7 days a week? Perhaps it's a combination of both of these elements that makes the World Wide Web so addictive.

Which ever you feel is your main reason for cruising the Internet highways and byways, the fact will always remain that for most surfers, the graphic nature of the Web plays a very large role in fulfilling the day-to-day requirements of the average user; even if they don't realise it.

Now somewhere along the line, someone has to be cooking up and serving this daily feast of eye-candy and textual content. And that's where the graphics and html designers come in.

This article deals with the graphics side of this equation. Part of the problem with the design and creation of Web graphics relates to creating eye-catching Web page images that will layout well on a page, while entertaining a visitor and not costing them a lot of time (as they wait patiently for the graphics to download and render in their browser).

Understanding a bit about the medium and its limitations can help Web artists and designers fulfill the end user's expectations, as well as their own.

It is to this end that the following article will serve to help the striving Web artist, and aim to make his or her job a little more satisfying, while keeping the masses happily clicking their way across the Internet.

Which Format Should I Use? One Problem, Two Solutions

At the present time on the Web there are but two absolute image formats supported. They are the Gif (Graphics Interchange Format) and the Jpg (Joint Photographic Experts Group). The PNG format is still fairly loosely employed, and isn't used by the majority (or supported by any but the newer browsers) as yet. This new graphics format will hopefully one day replace the versatile Gif and photo-quality Jpg formats. However, we won't address the PNG format here, due to its lack of support and implementation at this time.

The Gif Format

The Gif format is probably the most widely used graphics format on the Web today. The reasons are many, but the most common one would have to be because of its capability to compress data very well, while providing clean, crisp images with the most platform-independent results. Other qualities include transparency, interlacing and animation.

Why is the Gif format the most useful for creating Web graphics? Put simply, because of its ability to allow you to use a selective palette to create an image.

When you create a Gif image, you're producing an image that will use a maximum of 256 colours in its CLUT (Colour LookUp Table). This 'list' or Index of colours is contained in the header of every Gif image and makes up the bulk of the overall file size of the image.

One of the strong advantages of the Gif format is that you can customize the type and number of colours you want to use to produce the results you desire. When you save images as Gifs you have the option to choose only the exact colours that are used to make up the image, thus producing an image with a very explicit palette which will result in the smallest possible file size. And this, in turn, results in a clean, fast-loading graphic that will better serve the purpose for which it was intended.

Take this example, for instance. Say you create a simple 3 colour graphic. If you save this image as a Gif you're not forced to use the entire 256 available colours in the Indexed palette, which is just as well -- this would produce a graphic with a much larger file size than you need, without giving back much in the way of image quality.

Instead, when you save your final image, you can choose from a number of different palette options, including using only the exact number of colours contained in the image.

Look at the two examples below. Our 3 colour graphic has been saved once using optimal settings, and once using the maximum settings. Note the file size and quality differences between them.

This example was saved using an optimized palette of 8 colours, with no dithering or transparency. File size = 1.07kb.

This example was saved using a full 256 colour optimized palette, with dithering and transparency applied. File size = 2.78kb.

Considering the function this image would serve on a Web page, the quality between these two files is marginal, and 1.71kb could be considered a large difference in file size. Could you imagine having 10 different versions of this image on one page? The combined file size would add up to more than 10kb!

That's about 3 to 4 seconds longer that your visitors will have to wait if they have a standard 28.8 modem. And that's not the end result you want if you're trying to create fast loading Web pages.