Visual content	Issues for visual content	Image production	Image acquisition	Image manipulation	Image creation

Compression of image files when saving them reduces the data size so that they can be used on the web. There are a variety of compression formats which are useful in different circumstances. These include: GIF, JPEG, PNG and TIFF.

Our 4" x 6" image scanned in at 100% size and 300ppi will have a data (disk-space) size of 6.19mb if an RGB (full-colour) image, or 2.07mb if greyscale.

The same image at 75ppi will have a data size of 396kb if RGB, or 132kb if greyscale.

As it is recommended that a single web page (for dial-up access) be no more than about 60kb in total, it is clear that image data sizes must be reduced for web use.

There are two basic ways of reducing data size ­ 'lossy' or 'lossless' compression.

Lossy compression reduces the amount of information in your image, and can drastically reduce your file size depending on the level of compression (or lossiness) you select. Lossy compression can also have very deleterious effects on your image quality, particularly if you save the image over and over using a lossy format.

• JPEG (for images), MPEG (for movies) and MP3 (for audio) are examples of lossy compression formats.

Lossless compression does not reduce your image quality, but generally has other trade-offs.

• GIF works only with 256-colour images, so your image quality may be affected by reducing the colour information.
• PNG works with 24-bit (full-colour) images and is perfectly lossless, but is not compatible with older web browsers, and has substantially larger file sizes than GIF or JPEG. It is suitable for archiving.
• TIFF (LZW) is a compression format designed for archiving ­ it increases time in saving and opening files, and is not compatible with web browsers.

Because of their particular characteristics, JPEG is the most widely used compression format for photographic images on the web, while GIF is the most widely used format for graphics with areas of flat colour (buttons, charts, diagrams, cartoons). GIF supports transparency, and can also be used to create animations.

Go to Web colour issues for more about the colour properties of GIF and JPEG files.

A 4" x 6" photograph scanned in at 100% size and 75ppi (RGB) will have a data size of about 25kb at medium JPEG compression. A graphic of the same size saved as an 8-colour GIF will have a data size of about 10kb.

It is recommended that images be initially saved in a completely lossless format such as TIFF, PNG or Photoshop for archiving purposes. It may also be useful to scan or create images at a larger size than is required for web use, if it is possible that you will need to print or reformat them.

Naming Graphics Files

To ensure file compatibility across all types of web server platforms and browser platforms, follow the DOS naming convention of "eight dot three." For instance, filename.gif, filename.jpg

If a file will not open on a PC, make sure it has the appropriate 3 character extension. This is a common problem when opening files created on a Macintosh (which does not require the "dot three").

There are also several 'illegal characters' (such as '? * < .') that should be avoided ­ even if your system permits them, web servers may not. Systems such as UNIX recognise lower and upper case of the same character as different characters, ie Filename.JPG is not the same as filename.jpg To be safe, use only lower case letters and numbers, and be sure to include the correct file extension.

Summary:

• A web page should be no more than 60kb, so images within web pages should be even smaller.
• Compression may be 'lossy' (eg JPEG) or 'lossless' (eg GIF, PNG, TIFF) in regard to image quality.
• Images should be saved in a 'lossless' format (eg TIFF, PNG24) for archiving
• Images with many colours, such as photographs, are best saved as JPEG which provides full colour and efficient compression with some image degradation.
• Images with few colours, such as charts, logos, buttons, are best saved as GIF which provides efficient, lossless compression with a reduced colour range.
• Use a standard 'eight dot three' naming convention for images, to ensure compatibility across systems.