Continued from page 1
For small buttons, logos and other navigational icons, GIF is often preferable. It requires less processing power to decode, and files are often smaller than JPEG where few colours are involved. Use an image editing program that allows you to set 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.
When shrinking images, resize first and reduce colour depth second, for 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 right direction.
Include WIDTH, HEIGHT and ALT tags in all your image references, so that people can navigate your site while 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.
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.