Web Images: Image Optimisation

Related Articles

Article Links

Image Optimisation

While it may be apparent that speed is the overriding factor in determining good web usability, some techniques for producing aesthetically pleasing sites are less draining on download time than others.

Graphic files in their original state are usually far too large in size to be effectively used on the Web. In order to reduce files to a suitable size to be downloaded, they need to be compressed to reduce the file size. PNGs and GIFs can be compressed without a loss in image quality, however, JPGs use a lossy compression technique where data is removed from the image in order to achieve a lower file size, this results in a small loss in quality.

GIF compression follows a set pattern similar to how Western civilizations read a page - from left to right, top to bottom (Veen, J. 1997). It starts at the upper left pixel and works its way right to the end of the row and then goes down a level to the next row of pixels. Higher compression is applied to areas without change. So a uniformly coloured object will compress into a much smaller file size than the same sized object filled with many colours. GIF compression searches for changes along the horizontal axis and adds to the file size whenever it finds a new colour. When designing a Web logo, it is better therefore to design it with colour changes along a horizontal axis than a vertical one if possible and to keep the number of colours to a minimum.

The two images in figure 9.3a are identical, except that one has been rotated 90 degrees. The left image when saved as a GIF weighs 408 bytes and would take one second to download with a 28.8 kbps modem. The right image weighs 1.875K and would take 2 seconds to download, an interesting factor to consider when designing a logo or background image.

Fig 9.3a. These two images are identical, yet because of the way GIF compression works, they have significantly different file sizes. This image weighs 408 bytes.    This GIF bitmap image has a file size of 1.875K.

Fig 9.3a. These two images are identical, yet because of the way GIF compression works, they have significantly different file sizes. The left image weighs 408 bytes. The right image weighs 1.875K.

Because carefully, crafted graphics take a relatively long time to download, it is important to provide the reader with something interesting to look at, while the full page is downloading. One suggestion is to place a paragraph or two of text at the top of the page, so that at least there is something to look at in the mean time.

The Environment Agency takes a slightly different approach. It downloads an interesting background image first (figure 9.3b) and then overlays this with the site's content (figure 9.3c).

Fig 9.3b The Environment Agency's website renders this background image visible before the rest of the page's content
Fig 9.3b The Environment Agency's website renders this background image visible before the rest of the page's content


Fig 9.3c A split second after the background image has downloaded, the rest of the page
 content is laid over the top.
Fig 9.3c A split second after the background image has downloaded, the rest of the page content is laid over the top.

Publication Date: Monday 14th July, 2003
Author: Ukwdc View profile

Related Articles