This snapshot, taken on
02/07/2010
, shows web content acquired for preservation by The National Archives. External links, forms and search may not work in archived websites and contact details are likely to be out of date.
 
 
The UK Government Web Archive does not use cookies but some may be left in your browser from archived websites.


This information is being maintained for archive/historical purposes only.
It will not be updated.
Please see http://archive.cabinet-office.gov.uk for details.

 

Main navigation

In section navigation

2.8 Web graphics

Publishing date: May 2002

Images within a website can be used to lend structure and colour; they can also be used for decorative and illustrative purposes. These images can be saved in a number of formats, each of which has its own specific uses.

The use of graphics should be carefully planned and be consistent throughout the site. Their use should be minimal to increase their effectiveness and reduce potential rendering delays for users.

Use each checklist to ensure that your web pages comply with these guidelines

2.8.1 Checklist and summary: Core guidance

Checklist

Summary

Images are an integral part of publishing data on the web. Although they are useful and decorative they should be managed properly to ensure that they do not hinder the user’s access to information.

2.8.2 Sensible use of graphics

It is important to remember that users are visiting your website to gain information, not to be stunned by the visual imagery that has been included within each section. Organisations will not be thanked for slowing down the loading time of any document just because its display template is rich in graphics.

Sensible use of images will establish an organisation’s identity on the web and will help illustrate and clarify sections in a publication. All other images may just be decoration. There is nothing intrinsically wrong with this as long as it is minimal and controlled. A small image can be 3kb in size, equivalent to over 500 words of text in an HTML file.

2.8.3 Web-safe colours

It is important to remember that not every user of the Internet has access to a computer that has the most recent and advanced graphics card installed. What may look colourful and well defined to you may be quite incomprehensible to other users.

The web-safe colour palette should be used for text, hyperlinks and background colours. GIF art should, where possible, be generated using the web-safe palette, explained below.

There must always be a clear contrast between background colours and font colours. Black text on a cream or white-coloured background will always work.

There are two ways an author can specify colour within a page, whether it is for a background, text or use in Cascading Style Sheets: by name or by hexadecimal number.

Colours are preferably specified using their hexadecimal (number base 16) RGB values. A colour is specified by the intensity of the three primary colours red, green, blue each indicated with two hexadecimal digits representing eight binary digits. Each hexadecimal digit can have a value in the range 1 to 16 represented by the numbers 0-9 and the letters a-f, 0 being the lowest and f the highest. Each colour value starts with a # symbol and is then followed by six hexadecimal digits. This is an ‘additive’ colour specification in which the first two digits represent the intensity of the red component in the final mixed colour, the second two the green and the last two the blue.

This 24bit-colour specification scheme provides a palette of about 64 million colours to choose from, ie, the number 2 raised to the power of 64. However, it is recommended that Web pages should be constructed using only the colours taken from the more restricted palette available on computers fitted with graphics adapters capable of displaying only 256 colours. There is a further technical restriction on many 256 colour computers that result in only 216 rendering properly on-screen. Because these216 colours are common across a wide range of computer systems, they are said to comprise the ‘web-safe’ palette'.

For example, a Web author wishing the background of a page to be white should specify the following CSS property for the page body element:

body {background-color: #ffffff}

White is generated by the addition of the full intensity of each of red, green and blue, so each of the three two-digit values are set to the maximum value. Using zero intensity for all three primary colours produces black:

body {background-color: #000000}

The 216 colours of the web safe palette are generated when the value for each of the three primary colour components is restricted to one of the values: 00, 33, 66, 99, AA, CC, FF. So, for example #CC33AA is a web-safe colour, but #6A143B is not.

Important:
If a user has hardware that does not have a video card capable of rendering the web-safe colour palette, then the colour in rendered pages may be degraded.

Where possible test your web pages for legibility and usability on a machine with a 16-colour graphics card.

Web Colour Reference Site [External link]
Web safe colour palette

2.8.4 Text alternatives to graphics

Not all web browsers can display images, and some users, particularly the visually impaired, cannot make use of images even if their browser displays them. It is therefore imperative to ensure that all images within a website have an alternative text message describing the image contents.

The ‘alt’ attribute should be added to the HTML 'img' element, followed by a descriptive value for the image. An example of this is:

<img src=http://webarchive.nationalarchives.gov.uk/20100807034701/http://archive.cabinetoffice.gov.uk/e-government/resources/handbook/html/”logo.gif” alt=”logo:Cata logo”>

For this example a graphic browser would display the logo on the page, a screen reader would just read out the ‘organisational logo’ message and a non-graphic browser would display ‘organisational logo’ on screen.

Users of the Microsoft IE browser will always be able to see the text alternative of any image in a website by simply holding their pointing device over a particular image.

Important:
It may not always be necessary to add text alternatives when solely decorative images are used on a web page. Each ‘alt’ message will be read by a screen reader so unnecessary messages could actually hinder the use of a page. Use alt=” ” see section 2.4.5.6.

Browser windows with and without images

2.8.5 Image dimensions

It is important to always specify the dimensions for a graphic. This gives the browser a helping hand in rendering the page with as few screen redraws as possible. The ‘width’ and ‘height’ attributes must be specified in pixel values. For example:

<img src=http://webarchive.nationalarchives.gov.uk/20100807034701/http://archive.cabinetoffice.gov.uk/e-government/resources/handbook/html/”logo.gif” alt=”logo:department logo” width=”154” height=”35”>

2.8.6 Image alignment

Images can be aligned to the left, centre or right of a page as in this example:

<img src=http://webarchive.nationalarchives.gov.uk/20100807034701/http://archive.cabinetoffice.gov.uk/e-government/resources/handbook/html/”logo.gif” alt=”logo:department logo” width=”154” height=”35” style=”float:right”>

These are referred to as ‘floating images’. Use of this attribute will allow text to flow around the image rather than having the image sit in isolation within a page.

2.8.7 Image spacing

Images can be positioned on a page by using designated spatial margins for each image. The value for each attribute used must be specified only in pixels. For example:

<img src=http://webarchive.nationalarchives.gov.uk/20100807034701/http://archive.cabinetoffice.gov.uk/e-government/resources/handbook/html/”logo.gif” alt=”logo:department logo” width=”154” height=”35” style=”border-width: 0px; margin: 25px 20px 25px 20px”>

This example instructs the browser to display the image:

2.8.8 Imagemaps

Client-side imagemaps, introduced by Netscape in 1996, do not require any interaction between the page and the originator’s website once the page has been loaded to the user’s browser. They can be used offline because all the co-ordinates of the hot spots are contained within the HTML page.

When an imagemap is used, a text alternative should be supplied alongside the graphic in question. This text must be formatted using CSS and must be legible against the page’s background colour.

HTML authors should be aware that some early browsers do not support client-side imagemaps and may wish to include server-side imagemaps as well to cater for them. Browsers that can use client-side imagemaps will use them in preference to server-side ones if both are provided.

2.8.9 Graphic navigation

When graphical buttons are used for navigating a website, the site must always be as easy to use when these graphics cannot be viewed. There must always be a descriptive value to the ‘alt’ attribute that is given to every navigationally important graphic.

Important:
Turn off the automatic graphics download in your browser to give an indication of what your page is like when you cannot see the graphic buttons.

Is it still easily usable?

When graphic buttons are used, values must be specified for both the ‘width’ and ‘height’ attributes within the image element. This helps the browser to render the page with the minimum number of screen redraws.

It is important that graphic navigation buttons are not too large. This will help to ensure that the largest area possible is given over to displaying the document whilst also ensuring that the sizes of the graphic file are kept small.

2.8.10 Images containing text

Web managers should always try to avoid using images to convey textual messages. It is far easier to use HTML text and CSS to format the text in a number of ways. If text is used it is important to ensure that it is always legible and that the font colour contrasts with the background colours.

If the text is small in size it may well be better to disable the anti-aliasing feature that most image manipulation software uses when rendering text. This feature adds a slight blurring to the text so that it looks softer and is easier on the eye. This is fine with large fonts, but with very small text this blurring actually makes the information more difficult to read. Without this feature the text will look ‘blocky’ but will always be legible.

Navigation buttons

2.8.11 Image file sizes

The smaller the file size of an image the quicker it can be loaded to a user’s browser. The usability of a page will be degraded if users are forced to wait unnecessarily long times for decorative images to load.

2.8.12 Table alternatives to graphics

Large, complex images such as pie charts and bar charts cannot reasonably be described using the ‘alt’ attribute. When these are used the image should hyperlink through to an HTML page with the data given in tabular format. This ensures that the data is accessible to the widest possible audience.

2.8.13 Image directories

Placing all of a website’s images within one location in the website file structure will make the management and subsequent HTML linking easier for a Web manager. Images distributed all over a site may be easier at the very beginning but can be confusing and make locating specific images difficult at a later date.

It is recommended that consideration should be given to where images will be stored in the websites’s directory (folder) hierarchy at the same time as the overall hierarchy is planned. Commonly used schemes include having a sub-directory for images within each document directory, or alternatively, replicating the document directory name and structure scheme from the website root. The former scheme generates image URL paths of the form /foldera/sub-folders/images/ whilst the latter scheme results in image URL paths of the form /images/folders/sub-folderb/.

Some images will be used only once on a site; others, such as logos and graphical navigation elements, will be reused on multiple occasions. A single copy of each reused image is easier to manage, particularly when it needs to be replaced. One change is all that would be needed to effect the change through the entire website. Be cautious, when replacing an image. The replacement should be of identical dimensions to the one it is replacing otherwise the new image will appear distorted to the size on the old image.

2.8.14 Graphic formats

An HTML file stored on a web server does not actually contain the images that appear on the page. HTML img elements in the file instruct graphical browsers to fetch the image resource from the URL specified in the src attribute.

Images that are used several times in a page are only fetched once from the web server. An image used on one page that a user views and that is also used on subsequent pages will likely be retrieved from the browser’s memory or disk cache rather than from the web server. A website that reuses graphical elements within pages and across multiple pages will therefore render more efficiently than one that uses a lot of unique images.

Web site imagescan be saved in a variety of formats with the two popular formats currently being Graphics Interchange Format (GIF) and Joint Photographic Experts Group (JPEG) format. Generally GIFs are used for monochrome or colour line art and JPEGs are used for photographs and other continuous tone images. These formats have different features and strengths described below.

File compression
It is important to reduce the size of graphics files. Graphics files tend to be large compared with HTML files and large files demand long loading times. Larger dimensions and colour palettes increase the file sizes. File compression can significantly reduce a file size. The two main categories of compression are lossy and lossless. Formats that use lossy compression lose some data during compression, degrading image quality, but can achieve high compression ratios. Formats that use lossless compression preserves images fidelity but does not achieve high compression ratios.

Colour information in graphics formats
‘Bitmap’ format files such as GIF and JPEG store the colour information for each bit or pixel or ‘dot’ of the image. Uncompressed file sizes increase in proportion to the amount of colour information stored. The amount of colour stored for each pixel is often referred to as an image’s ‘color depth’.

2.8.14.1 Graphic Interchange Format (GIF)

GIF was the first compressed image format that became widely available and remains one of the most popular used for web graphics. Unisys owns the copyright for the GIF format. Images in this format can be used freely by organisations on the web but image manipulation software manufacturers have to pay a licence fee.

GIF has two standard subformats - 87a and 89a. Both subformats support interlacing, which allows browser to decompress and display alternating pixel rows of an image, instead of decompressing and displaying the image line-by-line. The effect is that the image renders rapidly, apparently at low resolution, with the fine detail being progressively filled in.

The GIF format uses lossless file compression. While this results in high-quality image reproduction, it also means that GIF files are larger in size than the same image would be if it were saved in a format using lossy compression.

A GIF is saved as a bitmap, effectively a series of ‘dots’ each having a particular colour value. This means that the image cannot be blown up to a larger size without losing definition.

Colour palette - GIF files use a predetermined colour palette. Typically an 8-bit (meaning 256 colour) palette is used although only the 216 so-called ‘web-safe’ colours are actually used in the image. When colours are sent to video cards that are not able to display them they usually display patterns of available colours that are intended to persuade the human brain to perceive the desired colours. This is called ‘dithering’ and the process can make images appear grainy.

Transparent GIF files - an advantage of the GIF89a subformat is that it allows a single colour in the palette to be nominated and displayed as transparent. This enables the construction of image ‘cut-outs’ for use in web pages.

Animated GIFs - an animated GIF is a set of GIF files concatenated and saved as a single file. Animated GIFs work in a similar fashion to a child’s flipbook. Multiple images are shown sequentially to give the appearance of movement. Any animated GIF that is used in a website should:

Illustrative graphic format

2.8.14.2 Joint Photographic Experts Group (JPEG) format

JPEG format uses a sophisticated lossy file compression algorithm optimised for photographic images in order to produce smaller files than lossless compression formats, such as GIF. Most software that allows images to be saved in JPEG format allow the user to make a trade-off between the lossiness of the compression and the size of the JPEG file that is created. The sharp edges that are used in line art rarely occur in natural photographs and a great deal of detail can be lost from a photograph without making much discernible difference in its appearance.

As with GIF, JPEG images are stored as bitmaps, which results in a loss of definition if the image is enlarged.

Colour palette - This JPEG is a 24-bit colour format that can support over 16 million colours. However, only users whose computer graphics cards support 24-bit colour will be able to see the full range of colours.

Progressive JPEGs - The JPEG format, like GIF, supports interlacing. However, a new JPEG format called ProJPEG (Progressive JPEGs) improves on interlacing by presenting images in stages. The first stage is a greyscale image, the next state has a few colours and the last stage is the full colour. The advantage of this is that the user sees a version of the entire image quickly. ProJPEGs file sizes are larger than regular JPEGs.

2.8.14.3 Portable Network Graphic (PNG)

PNG (Portable Network Graphic) format has been developed by the W3C and is intended ultimately to replace GIF files.

PNG works in a very similar way to GIF in that it uses indexed colour, has a lossless compression algorithm and is interlaced. However, it has a number of additional advantages:

W3C PNG standard [External link]

2.8.15 Examples of graphic formats

This image file has been saved in the three most common formats used on the Internet.

Their respective file sizes were:

GIF 13kb
JPG 7kb
PNG 4kb

2.8.16 Use of thumbnail images

A thumbnail image is a small version of a larger image. As small versions of larger images file they function as fast-loading ‘sample’ images when placed in web. The use of thumbnails gives users the opportunity to decide whether they wish to see the full-size version of images.

Each individual thumbnail image is linked to its corresponding larger image. A user can view the detail of the larger image by clicking on the thumbnail and waiting for the larger file to load.

In section navigation