Government of Canada Internet Guide
This section provides guidance on using graphics.
When you design and use graphics properly, you can make your Web pages easier
and more pleasant to read. The most common graphic formats on the Internet are
GIF and JPEG. GIF is often used for simple images composed of primary colours, while
JPEG is best suited to photographs and more complex detailed images. Regardless
of the format you use, you should consider the following issues.
Colours: Colours for Web site graphics must follow
Common Look and Feel Standard 6.5.
Colour blindness: How will users with colour blindness see the graphic
or page?
Necessity: Is the graphic essential to understanding the text?
Work required to produce a quality graphic: Does the graphic require
manipulation, re-creation or resizing?
Dimensions: Graphics should not exceed 590 x 472 pixels. Most current
personal computer monitors display 640 x 480 pixels, but the default icons and
status bars take up space. In inches, the graphic should not be more than 6 inches
high and 5.5 inches wide.
Transparent graphic: Should the graphic be transparent? Transparent
graphics merge with the grey background of browsers, so there is no white space in
and around the image. Aesthetically, it is usually best to make graphics transparent.
However, graphics within the text of a document do not have to be transparent. Some
applications allow the user to make graphics transparent.
Interlaced graphic: Should the graphic be interlaced? Interlaced graphics
are built gradually on the screen in five phases instead of all at once, so the user
gets a "sneak preview" of what is coming. Newer browsers and most authoring tools
support interlaced graphics. Use interlaced graphics sparingly, reserving the
technique for large graphics that would otherwise take a relatively long time to
download.
User's download time: As graphics can increase download file size, it is
best to minimize the size and number of graphics used on a page. Consider techniques
to improve download time, such as non-interlaced graphics, reduced colour density and
compression algorithms.
Graphic name: What graphic file name will you use?
Alternate text: For any graphic, you must always include an alternate text
description for the visually impaired. See the Accessibility Standard 1.1 checkpoint
in the Common Look and Feel Self-Assessment Guide.
Alignment of text with graphic: Is there text to the right of the graphic
that should be top-aligned, middle-aligned or bottom-aligned?
Options for presenting graphics:
- Use an in-line graphic. Display the graphic in the downloaded HTML
file.
- Present the graphic as a link to another file. Make a link on the HTML
page to the graphic, especially if the graphic is large or is not needed to
understand the text. If the graphic is very large, you can state the file size
in parentheses beside the link.
- Use a thumbnail image. Minimize the graphic to a "thumbnail" image,
which gives the user a preview of the image. The thumbnail graphic can be used to
link to the full-sized image.
- Include the graphic in a format other than GIF. If the graphic is
already prepared in a format other than GIF, you can make a link on the HTML
page, stating the format in parentheses beside the link. However, since the user
can view the graphic only by downloading it, this option is not recommended.
- Don't include the graphic. If the graphic is large, poor or not
essential, do not include it.
|
