Conserve Bandwidth - Shrink Those Images! - Part 1

Kai Chandler shows you how to optimise images to shrink download time. Part 1 of 2

If it's true that a picture speaks a thousand words, you'll probably be keen to display some images on your web site.

Perhaps they were taken with a digital camera or maybe they are screen shots from your PC. In either case, you'll be keen to optimise the images so that they can be downloaded quickly as few people will wait for more than a few seconds for an image to load. Optimising also allows you to email images more quickly. Either way, shrinking your images saves time and money especially if you pay by the minute for your web connection.

Part One of this guide looks at the basics principles behind image optimisation while Part Two covers some easy to use online tools to achieve the optimisation.

The key to download time is file size. A 25kB image will, generally speaking, download in a quarter of the time taken by a 100kB image, but may look almost identical.

First, a bit of jargon - there are several types of image file. The some well known ones are

GIF - Graphic Interchange Format. One of the oldest formats, it's also one of the most popular and versatile. It's ideal for logos, cartoons and similar material. GIFs contain up to 8 bit colour - that's 256 colours or in the jargon of the industry, a bit depth of 8 supports a colour depth of 256.

JPEG - Joint Photographic Experts Group. This format uses a lossy compression system meaning that some colour information is lost in the compression process. You can reduce the file size to 10% or even 5% with almost no loss in quality. JPEGs are ideal for photographs but not good for compressing images with large areas of solid colour such as logs. When a JPEG file is downloaded the browser needs to decompress it but the delay is not normally noticeable.

How to optimise images for the web

There are three main ways to reduce file size.

Reduce the image size - this is normally measured in pixels. A typical screen resolution is 800 x 600 pixels. An image measuring 200 x 150 will fill a quarter of your screen and will be 25% of the original size. You can check your screen resolution in the Display icon in Control Panel. You can also crop out any extra space around the important areas of the image.

Reduce the number of colours - As mentioned above, the GIF format supports a colour depth of up to 256 for a bit-depth of 8 while 7 bit colour produces 128 colours and so on. Your goal should be to find the lowest bit depth that still conveys a useable image. This is very subjective but it's surprising how a big reduction in bit depth can have only a minimal impact on the appearance of the image. How does it work? Reducing the bit-depth causes adjacent pixels with similar colour to adopt the same colour. Because less information is required to define the file, the consequent file is smaller.

Conversely, JPEG files are always 24 bit which allows millions of colours to be referenced. However, there's no option to reduce the colour depth.

Reduce the quality of the image - As JPEG is a 'lossy' format, you can specify the amount of loss and hence reduce the image quality to reduce the image size.

So to sum up, if you are developing material for the web you should try to keep your image files compact. To do this, follow the four point guide:

1. Ensure that their dimensions are no larger than necessary
2. Use an appropriate file format - JPEG for photographs, GIF for everything else.
3. If GIF, manage file size by reducing bit-depth
4. If JPEG manage file size by reducing quality.

Part Two looks at image optimisation tools.

 

Kai Chandler reviews top tools for family friendly surfing at www.surfcontrols.com