C & G web

Images on the Web

File Size

Memory is measured in bytes, kilobytes (or K), megabytes (or MB) and gigabytes (or Gigs). A floppy disc can store up to 1.3 megabytes of information. Your computer's hard drive may be able to store anything up to several gigabytes of information. Text files take up relatively small amounts of memory - the average text-only web page being about 15K - 20K or less. A scanned photograph (6 inches x 4 inches) at a resolution of 72 dpi (dots per inch) can be 350K to 400k.

What does this means on the Web?

The average 28.8 KBPS modem will take five minutes to download 1000K. This means that your text-only page will take six seconds to download but that photograph of the Kittens will take two minutes to download. And remember that in the UK you will be paying for those two minutes connected to the net.

Note: One way to keep a check on the sizes of your web pages is to aim for each page including ALL graphics to be less than 90K ­ but the smaller the better.


Resolution

Images are made up of thousands of dots of colour. These dots or squares are often called pixels. The resolution of an image is measured in dots per inch or dpi. A website will always be displayed at 72 dpi. The more dots per inch the image is made up of, the bigger the files size. Therefore with web page images, there is no point in using a resolution higher than 72dpi as the download time will be longer and you won't see a clearer image.

The only time you should use images with a higher dpi than 72 is when the page is meant to be printed out by the user.

So you've looked at the information you want to put on your web page, asked yourself 'Do I really need this image?', and 'What does it add to my website?' and have decided that you do need to use images. Maybe you need to put your logo on the page so that clients can recognise your company, or that the clearest way to represent some figures is as a graph, or as a photographer you need to show future clients or funding bodies your photographs.

The next section looks at how to minimize those file sizes.


Exercise

What is resolution measured in?
  • dpi (dots per inch)
  • MB (megabytes)
  • K (kilobytes)

Compression and File types

Help is at hand if you really do want to put images on your site. In order to decrease the size of images they can be compressed to make the file sizes smaller.

Two methods of compression are normally used on the Web. These are:

GIF (.gif) which also supports animation and transparency; and
JPEG (.jpg or .jpeg).

As a general rule an image or graphic with expanses of flat colour is best compressed using GIF compression. An image or photograph that has gradients of colour should be compressed using JPEG compression. If you have an image that combines both you will need to try both formats and choose the best compromise between image quality and file size.

Previous page...

Back to Top of Page

Computeach International Ltd

Christopher Ward London Limited

Christopher Ward London Limited