RESOURCES  UNSW EDUCATIONAL DEVELOPMENT & TECHNOLOGY WEBSITE
Flexible EducationWeb & Media ProductionWebCT @ UNSWLearning Resource Catalogue
Web & Media Production
UNSW Educational Development & Technology Centre RESOURCES home RESOURCES home
 
    

 

Producing Content for the WebWeb Design & ConstructionAccessibility in Web Design

Visual content

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

Web colour issues

Image resolution
Image compression and file formats
Web colour issues
Summary, Self-test & Explore
Depending on the image type, a range of colour issues are relevant. The degradation of a full-colour image on a low colour display should be considered, as well as how to best optimise a limited palette used in graphics.

Colour range of images is expressed as 'bit-depth'. Full-colour is 24-bit, over 16 million colours (2 to the power of 24). 8-bit colour or 'index colour' such as in GIF images contains 256 colours (2 to the power of 8).

Photographs usually encompass a wide range of colours, and saving them in JPEG format is the best option. JPEG contains 24-bit colour which will degrade to 8-bit colour on older displays. Medium quality or better (40% and above) compression level should be used, while your original should be saved as TIFF.

Graphics, with a limited colour palette, may be saved as GIF format, however, depending on the palette used, dithering of the image on an 8-bit display may significantly affect image legibility, and use of 'web safe' colours for important image areas should be considered (see Colours in the GIF format).

The recommended web 'palette' or colour range is a composite of Windows and Macintosh 'system' colours, totalling 216 colours represented by 'hexadecimal' names (#CC00FF, #336699 etc). This is known as the 'web safe' palette, as all the colours contained in it will display accurately, without 'dithering', on a 256-colour display, on either Windows or Macintosh computers.

In recent years, as most people have more powerful computers, video cards and display devices, it is less usual for people to be limited by a 256-colour display. There are still good reasons, however, to be aware of and to utilise the websafe palette.

  • In order to increase screen resolution, colour depth may have been reduced
  • In order to increase speed of graphics rendering, colour depth may have been reduced
  • Older systems and software may still be using 256-colour display, and should be accommodated as far as possible in the interests of accessibility.

'Dithering' of colours occurs when the computer display combines two colours in order to approximate an unavailable colour. While in many cases, this will not interfere with site legibility, in some cases it can be extremely detrimental.

  • On backgrounds, when text may become less legible
  • On text itself, particularly at small sizes
  • Anywhere legibility is critical eg text on buttons, or on charts and diagrams.

In these situations it is worth ensuring that websafe colours are used.

Colours in the GIF file format

To save a file as a GIF, it must be indexed, which converts it to an 8-bit colour image (256 colours). When a picture is indexed, a colour palette is implemented to render the colours. Palette options will also allow you to reduce the bit-depth of the image, which will reduce the final file size. For example, an image containing only 4 colours may be saved as at a 3-bit colour depth, which contains a maximum of 8 colours (2 to the power of 3). Some applications also allow you to manually set 'lossiness' for GIF images.

GIF images may also contain a transparent colour, so that images may be placed on a patterned background. See 'Layers, Masks & Channels: Transparency' (p36) for more about transparency in images.
NOTE: Images that appear to be only 2 or 3 colours usually contain more, because of 'antialiasing' (the in-between-coloured pixels that create the illusion of smoothness around curves, text etc.). Take this into account when choosing bit-depth.

The palettes usually available when exporting to GIF are adaptive, perceptual, selective, exact, web or system. Properties of these colour tables are explained in EXPLORE: web colours.

It is possible using adaptive, selective or exact palettes to have a combination of web safe (for critical image aspects like background and text) and customised colours.

Summary:

  • Photographs are best saved as JPEG, which contains 24-bit colour
  • Graphics with a limited range of colours are best saved as give, with a web safe or optimised palette.
  • There are a range of palette options for optimising an index colour palette.
  • Where dithering of colours may compromise legibility, web safe colours should be used.

EXAMPLES
Web colour palettes

ACTIVITY
Compare colour properties

EXPLORE
Optimising colour tables

 
 
 
 

 

UNSW Educational Development & Technology Centre RESOURCES home RESOURCES home