Standard: Graphic Selection and Screen Layout
On this page
All standards and guidance
Definitions
A graphic is an image, including photos, logos, banners, icons, maps, and other images.
Note: Charts (including bar charts, pie charts, flow charts and organizational charts) and graphs are covered separately (See:
Charts).
Top of page
Content requirements
- Choose graphics that provide information, navigation, or visual organization, or serve some other obvious purpose.
- Use small graphics sparingly to add visual appeal, but choose images that are relevant to the page. Avoid adding pictures just because they look pretty.
- Don't create graphics to display text.
- Captions and alternative text:
- Provide text alternatives in compliance with section 508 accessibility standards.
- In most cases, provide an explicit text caption and use empty alternative text (set alt="") so people with visual disabilities will not hear redundant information.
- If the connection between image and nearby text content on the page is visually obvious, it is not necessary to provide a caption. However, if a caption is not provided, you must then use alternative text to describe the image's contents or function for visually impaired visitors.
- Avoid infringing copyrights, trademarks, and other intellectual property issues
Top of page
Style requirements
- Graphics at the top of the page must:
- Be right‑aligned unless the right side is used for navigation (e.g., a highlights box is on the right).
- Be no larger than 250 pixels wide by 250 pixels high.
- Not be "splash" graphics or banners across the width of the page.
- Use either the JPEG or GIF format.
- Graphics below the first screen must be:
- sized appropriately for how you use them (a width of 200 pixels generally works well), and
- aligned left or right with text wrapping around them.
- Caption text must use the standard caption style.
Top of page
Examples
The two screen shots below show how many more links are visible with graphics to the right at the top of the page. No content changes; only the graphic placement differs.
Graphic centered at top |
Graphic right-aligned |
|
|
Images may be left-aligned at the top of the page when the right side is used for navigation and the text wraps around the image:
Top of page
Rationale
Large images at the top of a page shove valuable introductory content off the screen. Resizing and/or right‑aligning the graphic brings the text to the top of the page, making it much more visible. Web visitors generally look first to the upper left corner of the main body of the page; that corner therefore should be reserved for your key message, not for a graphic.
Generally, images should provide useful content. It should be immediately obvious how an image relates to the subject.
Images can also create visual appeal and accent a page's text, even without conveying a large amount of information. However, images directly relevant to the page's content tie the page together better than random pictures of a mountain stream or clouds in the sky.
Top of page
Exemptions
Exceptions may be granted by agreement between your Web Content Coordinator and OPA Web team member.
Top of page
Related governance documents
EPA
Related Policies
Related Procedures
Related Standards
Related Guidance
Non-EPA
Top of page
Full Metadata about this standard
Name Graphic Selection and Screen Layout
Tracking number NT00000000
Type Standard
Required or Recommended Required
Effective date 03/13/2006
Date approved 03/13/2006
Category Graphics and Multimedia
Web Council review by 09/01/2008 (or earlier if deemed necessary by the Web Council)
Governing Policy Web Governance and Management (PDF) (4 pp, 339K, About PDF)
Top of page