Web Standard: Graphics (Images, photos, infographics)

Note

All EPA public and internal content pages and web applications are required to follow this standard.

Related Information

On this page:

Related Links
Examples of Graphic Types
Examples of decorative and explanatory photos
Example of content with decorative image, at top, and explanatory image, at bottom.& Click on the image to view a larger version.
Example of banner or hero image type of graphic. Click on the image to view a larger version.
Example of banner or hero image type of graphic.& Click on the image to view a larger version.
High Quality Images

The WebCMS is no longer limited by download speeds, so use high quality and large images no bigger than 10MB. If the system delivers responsive content and the appropriate image size, add the best image you have, and let the system deliver the appropriate image size depending on device. (No bigger than 50k is recommended for the IntraCMS.)

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 graphic/photo adds visual appeal to the page, but does not expand visitors’ understanding of the content. A graphic/photo without a caption is assumed to be decorative.
  • An explanatory graphic/photo provides information and expands visitors’ understanding of the content covered by the page. An explanatory photo should have a caption.
  • A banner (or hero image) is an image or series of images located at the top of a web page that spans more than half the width of the page.
  • An Infographic is a graphic visual representation of information or data intended to present information quickly and clearly.

Public Content Requirements

Graphic Requirements

  • Graphics should adhere to the standards set forth in the Image Guidance and Web Standard: Landing Page.
  • Before developing any multimedia content (video, infographics, animation, GIFs, etc.), please contact your PROTRAC Approver, Communications Director, and/or Public Affairs Director.
  • Do not infringe on copyrights, trademarks, and other intellectual property rights. See Copyright Issues.
  • Do not stretch the image out of proportion.
  • Images should be related to the content.
  • Formats: Use only GIF (.gif), JPEG (.jpg, .jpeg), or PNG (.png) formats.
  • In the instances where a larger size graphic is necessary to see vital detail, add a link below the graphic with link text such as, "View a larger version of this image".
  • Do not use HTML to manipulate the size of the image, stretching it out of proportion.
  • Banners/hero images should only be on landing pages. Adding banners to sub-pages gives them a level of importance that they don’t have. Specific exceptions granted by the Office of Digital Communications.

Section 508 Requirements

  • image demonstrating graphic as a header
    DO NOT DO THIS. Don’t add text to images. Image demonstrating graphic as a header. Click on the image to view a larger version.
    Do not use images that include text.
    • Do not add text to images that are intended to serve as headers.
    • Information conveyed in an infographic should be provided in a text alternative on the same page or in a section 508 compliant pdf. Users should be aware that the information on the page or pdf is the same information as in the infographic.
  • Decorative photos should use empty alt text. The final code should read (alt=””).
  • Graphics should have alt text or captions because the image adds context to the page and needs an explanation.
  • Graphics must provide sufficient color contrast for visitors with visual disabilities, and visitors who cannot view the information provided through graphics must have access to equivalent information. ​If you still have questions, contact EPA's Section 508 Team for suggestions on how to make your map, diagram or flow chart 508-compliant.  
Other Visual Standards

If you still have questions, contact EPA's Section 508 Team.

Related Information

Intranet Content Requirements

  • 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="").
  • In the instances where a larger size is necessary to see vital detail in the photo, then add a link below the graphic to another page containing that graphic with link text such as, "View a larger version of this image". .
  • File size: Recommend no more than 50K.

About this Standard

All EPA public web content must adhere to all federal requirements including; the EPA Web Standards, the U.S. Web Design System guidelines, federal plain language guidelines, and the 21st Century Integrated Digital Experience Act. Internal content, including Intranet and Microsoft 365, may differ from the public content. If not explicitly stated, content must adhere to all federal requirements.

Original effective date: 10/08/2014
Last approved on: 06/12/2024
Web Council review by: 06/12/2027 (or earlier if deemed necessary by the Web Council)

Web Policies and Procedures

Contact Us About Web Policies and Procedures
Contact Us to ask a question, provide feedback, or report a problem.
Last updated on June 12, 2024