Better Web Graphics
By Jim Moore

Web graphics are getting better. When browsing the Internet today it is evident that web site designers now have a better appreciation of how to reduce file sizes whilst still maintaining adequate visual picture quality.

Most web authoring, photo editing and drawing applications now have "web optimization" features and there are numerous low cost standalone applications that achieve the same thing. The importance of using these techniques has now hit home and many web sites are all the better for it.

There is however one "blind spot" which many still overlook, and in doing so they undo many of the good things they seek to achieve. The problem is particularly acute with smaller pictures, logos, and anything with text or fine line features. It results from failing to ensure that the resolution and size of the stored graphics file is exactly the same as the resolution and size at which it will be displayed on the web site.

Most web authors get the resolution part right by setting it at 72 dpi, which is currently a web-browser's maximum resolution, but then they import the file into their web-authoring program and drag it about until the size looks right. Their HTML source code then specifies an image size that is different from that of the stored image file, and so any computer wanting to display the web page has to recompute (resize) the image.

This is bad...

(a) because it takes time to recompute all the image details.


(b) because the recomputed picture can not represent detail as it exists in the original. The smaller the image, the finer the detail, and worse the recomputed picture will look.

Icons, logos and text often contain features represented by a line of single pixels, or even just one isolated pixel, such as a dot. Re-computing the picture to make it a different size will often lose such features completely and any text may become ragged or unreadable. Text with drop shadows or embossing suffers particularly badly when re-sized.

The answer is to ensure that the web page authoring procedure determines all the picture, logo, button, and icon sizes (where possible) before the individual graphics are produced. The graphics can then be made to look right, and stored, at the exact size that they will appear on the web page.

Where this is not possible, existing graphics files need to be resized, say in Photoshop, and any lost or degraded features restored before saving the final copy.

The final results will justify the effort both in terms of improved download speed and overall quality.