Style over content

One of the most common and mis-used phrases relating to the Web is 'Content is king'. More often than not, the truth is more like 'Content is lacking'. This is because Web developers' bosses or clients tend to confuse a good-looking site with one that's useful. It's a legacy from the days of print marketing, when ultra-glossy brochures and catalogues were essential to promote a successful company image.

But on the Web, such a policy falls flat on its face, because big graphics files take ages to download. Curious about what your site looks like to those without access to the latest technology? Then unplug that leased line, replace it with a 56K modem, set your display to 800 x 600 with 256 colours, and switch off the external CPU cache in your PC's BIOS. Empty your browser's cache and access your site now. If the home page takes much longer than ten seconds to load, or looks badly designed, you can bet that a sizeable proportion of new visitors to your site will get bored and go elsewhere.

There are simple steps you can take to increase the load speed of your site. First, don't do as one Webmaster did, and assign four separate image files to four identical home page logos, thus ensuring that the page took around three times longer to load than was necessary... On a more sensible note, treat your graphics images as MP3 files - be aware that you can remove some of the 'unseen' data and yet maintain the quality appearance of your site.

Choose your format carefully. JPEG is great for photos and other colour-rich images; use standard encoding rather than progressive encoding, as some older browsers don't support the latter. JPEG is a lossy compression format, and on the Web you can afford to lose a bit of detail in order to save space. Typically a 30-40% compression level will retain enough detail to keep the image usable, while dramatically reducing the size of the image. Some images - notably those with plenty of continuous tones - will compress better than others. Experiment with compression settings until you're happy with the result.

For small buttons, logos and other navigational icons, GIF is often preferable. It requires less processing power to decode, and the files are often smaller than JPEG where few colours are involved. Use an image editing program that allows you to set the number of colours as 2, 4, 8, 16, 32, 64, 128 or 256. Many programs only allow 4, 16 and 256, which will inevitably lead to waste. Experiment with colour reduction; in most cases you should be able to reduce your navigational buttons to 16 colours or fewer with no loss of image quality. If you find that you require at least 128 colours for a particular file, consider changing it to JPEG format, as this could save more space.

Other tips:

When shrinking images, resize first and reduce colour depth second, for the best anti-aliasing results.

Reduce colour depth in steps - 256 to 128 to 64 to 32 to 16 - as this will often produce better weighted colours than a jump from 256 to 16.

Whichever format you use, be sure to save images at a resolution of 72 dpi, as anything higher is a waste when images are displayed on screen.

HTML pages can also be pared down to a minimum. There's plenty of software around that will help with this task - a search on 'HTML optimisation' or 'HTML compression' will lead you in the right direction.

Include WIDTH, HEIGHT and ALT tags in all your image references, so that people can navigate your site while the graphics are still loading.

Only use graphics where you need them. A good designer can produce a clean, attractive and easy-to-navigate site with just a few well-placed image files.

Above all, remember this: Web surfers have a very short attention span, so a fast site is a popular site.

ABOUT THE AUTHOR
Alex Cruickshank is a freelance IT journalist and contributor to the UK editions of PC Magazine, Mobile Computing and various other titles. He's also the Editor of IT Reviews (http://www.itreviews.com) and The Glass Belljar (http://www.belljar.co.uk). Perhaps not surprisingly, both sites make very careful use of graphics.