file size

project home page
background & more information
finding the images you need
on-line galleries
making your own
taking your own
digital image sizes
digital image sizes
file size
adding images to documents
paper size
image file types
jpg or gif
screen prints and clip art
screen prints
clip art
the problems with text
line length
text boxes
text images
free tools
image editing
web page design


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.)

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.
In these illustrations, examples of how the flower1 picture used earlier in this section appears at a range of quality or compression settings are shown after a reduction in height and depth dimensions achieved a reduction to about 270Kb file size – still much too big for most uses.

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.

At 80%, only a trained eye would see the difference, and the file size of 47Kb is reasonable for the flower1 illustration used at the start of this section.

It is worth pointing out, though, that on the web, only 216 colours are used. 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.

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.

^  top
page updated by Andrew Hill, Dunstable College 23 July, 2006