Follow these requirements and best practices for designing graphics and developing images for Office of Energy Efficiency and Renewable Energy (EERE) websites and applications. This includes the requirements for making images Section 508-compliant.
Requirements
All images should follow the guidance in the Energy.gov Image Guidelines document.
Include Alt Text
Screen readers use alt text to provide visually impaired users with a description of a graphic. Read our page on writing alt text to ensure your site complies with Section 508 standards.
Use Sufficient Color Contrast
508 guidelines state that there must be sufficient color contrast between text and its background color. Your graphics must meet at least AA-level conformance on W3C's Web Contrast Accessibility Guidelines.
Don't Use Color to Convey Meaning
Do not use color alone to convey meaning. This makes your image impossible to understand for colorblind users.
Avoid Flickering Images
People with photosensitive epilepsy can have seizures triggered by flickering or flashing in the 4 to 59 flashes per second (Hertz) range with peak sensitivity at 20 flashes per second. Use care when design animated GIF images or other refreshing content.
Best Practices
Following these best practices will result in higher quality images.
- "Sharpen" your images in Photoshop using the standard sharpen filter ("Filter/Sharpen/Sharpen.")
- Photos should not be over-optimized or degraded in any way. If degradation is noticeable in a photo, that photo should not be used. A better quality original should be found.
Using Stock Images
EERE strongly recommend using images from government photo repositories and libraries, such as DOE's Flickr photostream or image library. However, there may be a need to download stock images for materials that need visuals unavailable in government photo libraries. You may use stock images per the guidance below.
Royalty-free images
You may use royalty-free copyrighted paid stock images if you follow the licensing information provided by the stock image vendor. You must credit the site you purchased the stock image from, along with the catalog number (Example: Photo from iStock, 123456). Please avoid downloading rights-managed and rights-ready images, as these have different licensing terms and require additional paid licenses that require strict adherence to terms.
Free Stock Images
You may use free stock images if you follow the guidance on the vendor's site. We recommend using these images sparingly as they are widely used by other entities and are often lower quality. As with royalty-free copyrighted images, free images must also be credited with the vendor site and catalog number. Alternatively, if there is no catalog number, you can also credit the photographer or creator of the image.
Using copyrighted photos and graphics
You may use copyrighted photo and graphics only if you have obtained proper written approval from the creator.
You may want to include the following in your request:
- Link to the photo or graphic you would like to use
- Where you are going to use the photo or graphic; i.e. website or document
- Purpose for using the photo or graphic
- Summary of the content that will surround the photo or graphic
- Dates that you will begin using the photo or graphic, and a timeframe of how long the photo or graphic will be displayed. If this is an indefinite amount of time, please indicate this.
- Request of how the photo or graphic owner would like the copyright information displayed.
Please retain a copy of the written approval from the creator or copyright holder.
Writing Captions for Images
If an image is non-decorative, it should have a caption. All images or graphics taken from third party sources should also have proper attributions to where the image or graphic came from originally.
- Captions should be written for all visitors and shouldn't duplicate alt text. Information that would benefit both sighted visitors and visitors using screen readers should be put it in the caption.
- The caption text override box (which is accessible by checking the Display Override Text Fields box in the Media Block Editor) allows for extended formatting of image captions.
- When formatting captions, italicize only the attribution part of the caption. The remainder of the caption should be left in plain formatting (no italics, underlines, bold, etc.).
Adding and Editing Uploaded Media
CMS Support maintains guides for creating new media and editing previously uploaded media (requires CMS login to access).