Web Standard: Graphics (Images, photos, infographics)
We are 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.
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.
Graphic Requirements
-
Graphics should adhere to the standards set forth in the Image Guidance.
-
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 microsite homepages. Adding banners to sub-pages gives them a level of importance that they don’t have. Specific exceptions granted by the Office of Web Communications.
Section 508 Requirements
-
Do not use images that include text.
- Do not add text to images that are intended to serve as headers.
- 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.
- Information conveyed in an infographic should also 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.
Related Information
- Images in the WebCMS
- 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
- Photos to use on EPA Web sites (intranet)
- You can also search on Flickr for photos that are posted with a U.S. Government works license.
About this Standard
Original effective date: 10/08/2014
Last approved on: 06/09/2021
Web Council review by: 06/09/2024 (or earlier if deemed necessary by the Web Council)