Definitions

• A graphic is an image, including photos, logos, icons, static maps, infographics, diagrams, charts (including bar charts, pie charts, flow charts and organizational charts), graphs and other images.  For the purposes of this standard, graphics do not include videos.
• A decorative photo adds visual appeal to the page, but does not expand visitors’ understanding of the content.  A photo without a caption is assumed to be a decorative photo.
• An explanatory photo provides information, navigation, or visual organization, and serves an obvious purpose.  It expands visitors’ understanding of the content covered by the page.
• A banner is an image located at the top of a web page that spans more than half the width of the page.

Application

The standards set forth below apply to all graphics on sites managed by EPA staff.  These include graphics:

• on legacy sites,
• in web applications, and
• on pages in One EPA Web sites. 

Graphics on One EPA Web home/hub pages must in addition follow the process and standards set forth in the Image Guidance.  The requirements in this standard do not apply to videos (see Web Standard: Videos).

Content Requirements

Requirements for All Graphics

• Avoid using graphics to display text.  If text is provided in a graphic, and that text is not also included in the content, include a text alternative for the content of the graphic.
• Do not infringe on copyrights, trademarks, and other intellectual property rights.
• Do not stretch the image out of proportion.
• Do not post banners on any page. 
  • Exceptions:

    • EPA home page

    • Microsite home pages and pages in applications designed to look like microsite home pages, for example the Science Inventory home page

    • Specific exceptions granted by the Office of Web Communications

    • Pages within the "Learn the Issues" web area, for example the Learn about Emergencies page

    • Regional "home" pages within the About EPA site, for example the Region 4 home page

    • Pages intended to mimic the front page of a printed newsletter, for example the May 2015 issue of the EPA in the Pacific Southwest newsletter

Requirements for Decorative Photos

• Relevance:  Photos intended for decorative purposes should be related to the surrounding content
• Section 508:  Use empty alternative text (alt="").
• Formats: Use only GIF (.gif), JPEG (.jpg, .jpeg), or PNG (.png) formats.
• Dimensions:  up to 325 pixels wide, and up to 325 pixels high. 
• File size:  No more than 50K.
• Page location:  Generally on the right side, with text wrapped around it.
  • Note: do not use multiple decorative photos on a page, associated with headings and links, so that the page, or part of it, resembles a Resource Directory home page.
• Example: image on Health and Water Research page

Requirements for Explanatory Photos

• Section 508:  All explanatory photos must have a caption to explain how the photo subject relates to, or illustrates, the content of the page.  The caption will provide the context for accessibility in lieu of the alt text.  With respect to alt text for these images,
  • if the caption does not explain what sighted visitors can see in the photo, add alt text  
  • if the caption explains what is being seen, do not add alt text.  Instead, use empty alternative text (alt="").
• Formats: Use only GIF (.gif), JPEG (.jpg, .jpeg), or PNG (.png) formats.
• Dimensions:  Up to 400 pixels wide, and up to 400 pixels high,  unless a larger size is necessary to see vital detail in the photo.  If a larger size is needed to see detail, then add a link:
  • below the graphic
  • to another page, or to a colorbox, containing that graphic
  • with link text similar to "View a larger version of this image" .
• File size:  Recommend no more than 50K.
• Examples:
  • images on Nutrient Pollution: The Problem page
  • image on Introduction to Bed Bugs page
  • image on Nutrients Management Research page

Requirements for Graphics other than Photos

• Relevance:  Maps, diagrams, infographics, charts (including bar charts, pie charts, flow charts and organizational charts), and graphs must expand  visitors’ understanding of the surrounding web content or represent the topic to which they refer. 
• Section 508:  Contact the EPA 508 coordinator for suggestions on how to make your map, diagram or flow chart 508-compliant.
• Dimensions:  Generally, up to 600 pixels wide, and up to 600 pixels high. If a larger size is needed to see detail, then add a link:
  • below the graphic
  • to another page, or to a colorbox, containing that graphic
  • with link text similar to "View a larger version of this image" .
• File size:  Recommend no more than 50K.
• Page location:  Left, centered or right.  Depending on the size and placement, text does not necessarily need to wrap around it.
• Examples:
  • Maps:
    • About Deer Lake AOC map
    • Fenceline Air Monitoring at Pet Coke Storage Facilities map
    • New Bedford Harbor cleanup map
  • Diagram:  How are plants and animals exposed to contaminants?

Related Information

• Style Guide: Media
• Web Standard: Graphic Logos
• Image Guidance (applies to images on One EPA Web site home and hub pages)
• Posting Copyrighted Works on EPA's Website (PDF) (4 pp, 62 K, About PDF)
• Photos to use on EPA Web sites (intranet)

About this Standard

Effective date: 10/08/2014
Date approved: 10/08/2014
Web Council review by: 10/08/2016 (or earlier if deemed necessary by the Web Council)