Today, the average size for a single web page is somewhere around 100 or 120 kilobytes. For many people, this doesn't amount to much, especially in places like North America where bandwidth is increasingly becoming a non-issue. As the Internet pipes fatten, allowing for more, and faster, traffic, so do people's web pages.

So why even bother optimizing your web-images for faster download?

Because the paragraph above is a fallacy. It is the attitude many people take when constructing their pages and it's the persistant excuse one hears when this is pointed out to pages' owners. Why optimize? Compression and palette reduction not only makes images smaller, it makes them less attractive. Therefore, in order to preserve the integrity of their images, many people either make a conscious decision to not optimize, or they do it unwittingly simply out of a lack of awareness.

However, it is precisely this attitude that will keep visitors away from your web site. Unoptimized web images are heavier, and even though bandwidth in many countries has become relatively cheap, in others it's still a significant player in people's browsing experience. When you design for the World Wide Web, the key concept you must always keep in mind is that this is a global medium, where physical location in real-space is, for the most part, largely irrelevant in cyber-space. Sure, your house and computer might be located in South St. Louis, but your audience is coming in from all over the planet via connections that may or may not be up to par with the current trends in technology.

Additionally, image optimization does not necessarily mean that the visual fidelity of your pictures is lost entirely. In most cases, a careful balance can be struck between Quality and Compression. If you choose the proper file format for your image, and then select the proper settings, you can significantly reduce its ultimate file size and probably not lose anything. For example, a 16-color sketch drawing painted in PhotoImpact using the Watercolor paint brush could very easily be reduced to more than half its original size if you selected the GIF file format, which is the perfect candidate for low-color line art and drawings. Knowing which file format to save your images in is half the battle and often times you see people who possess a vague idea of what image optimization is about choose a completely inadequate file format to save their picture as. I can't even count the number of times, for example, that I've been to a person's web site to have a look at some of their photographs only to find that the images are all 256-color GIF files with the color and fidelity completely destroyed. If they had chosen the JPG format, with even a moderate compression/quality level (say, 85%), the images would not only have turned out beautifully in my web browser, but they would have probably been smaller than the GIF files to begin with as that file format is perfectly suited for photography.

So, to reiterate: why optimize? Faster loading web pages. Pages that weigh in at less than 60 kilobytes can take up to 20 seconds to load on a slow modem connection to the Internet. People don't usually stick around longer than this to see if a page loads entirely or not.

Below are some tips for making better web-graphics:

1. Know your file formats. The three most common image file formats on the web are: GIF, JPG and PNG. Each one has its own strengths and weaknesses, and they are each suitable to a specific kind of image content. GIF is perfect for line art, drawings, sketches and anything else with a quantifiable number of colors. JPG, on the other hand, is ideal for photographs where the number of colors ranges in the millions. PNG has the best attributes of both GIF and JPG but without any of their typical drawbacks. Unfortunately, there are two factors working against PNG: imcomplete browser support - while Microsoft Internet Explorer, as of version 4, natively supports PNG, Netscape Navigator and Opera Software's Opera browser do not. However, freeware plug-ins exist at least for Navigator which allow you to view PNG images; and slightly larger file sizes, on average, than GIF or JPG.
2. Know your HTML. When placing images on a web page, don't turn full-sized images into thumbnails using the <IMG> tag's Height and Width attributes. The images are still loading in their entirety but are just being displayed in smaller window. If you really want to create smaller, quick loading thumbnails (say, for a catalogue of pictures you took while on vacation), then actually create small thumbnail images and then link them to the larger images using the <HREF> tag.
3. Know your audience. Sure, fancy, animated horizontal rules look fun, as do those super kewl GIF animations of the dancing torch flame, but are they really necessary? Are they an integral part of the presentation of your page, something that will not only enhance your audience's experience but also help communicate your ideas to them effectively? If the answer is 'yes, then by all means keep them in; but if it's 'no', then kill 'em. Gratuitous images don't convey anything to your intended audience other than annoyance at having the extra download time added to their bill.

Next time, I'll talk about techniques you can use when optimizing your images.
If you'd like to comment on this article, then by all means send me mail at mindcrime@sff.net