Reducing the physical size in inches or centimetres with an image editor will also help with the reduction in the other important dimension – file size. (Unless you just drag the handles to resize an image in Word or a web editor like Dreamweaver which has no effect on file size at all – that’s why you should use an image editor first and then put it into Word or Dreamweaver.)

[size4.jpg]
The original image was nearly 1Mb. Halving the width and depth will usually result in a file size of 25% of the original.

At 20% compression the effects of reducing colour information is obvious. The file size is now a mere 23Kb – less than 4% of the original. Probably OK if a small illustration were required but the quality isn’t really good enough.

[size5.jpg]
At 60% the loss of quality is much less noticeable.

Literally millions of colours and shades are used in photographs. An image file stores the combination and position of colours used for each pixel. So lowering the number of colours that can be stored reduces file size. The processes used in the various methods of compressing a picture take care of this for you.

A range of compression from high to low is shown here for a picture of a flower. The Joint Photographic Experts Group developed the commonly used JPEG file format, usually shown as .jpg as the filename suffix. It works well for photographs where thousands of small areas of different colours are invoved.

[size.6.jpg]
At 80%, only a trained eye would see the difference, and the file size of 47Kb is reasonable for the full flower image which would still nearly fill some screens.

It is worth pointing out, though, that on the web, only 216 colours can be used with any confidence that they'll be interpreted accurately. That set of colours is called the web safe palette and, apart from monitor display settings varying, using just those colours ensures that what you publish can appear the same to everyone.

The most obvious example of where problems arise is in banding – in sky colours or graphics where shades of one colour look great on your screen but strange on the web.

[orangesq1.gif] and [orangesq2.gif]
The original design and how it appears in the web-safe palette

You or users may also encounter similar banding with older printers that may not handle colours well. Generally, try to avoid shading like this unless you are doing the printing for others. On screen it will be obvious to you what works and what doesn’t. Some monitors may also be set to display a low number of colours – which can produce similar effects – quite common these days where pcs have been upgraded but monitors left at the highest settings the pcs could originally cope with.