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 must follow these requirements.
Use Large Images
Images should be at least 1200 pixels wide at 72 ppi. The size your image will display at will depend on the type of page it's on and the way it's being displayed. See Energy.gov Image Display Sizes for more information.
Note that images that are taller than they are wide may appear stretched out or blurry. These images may display properly if placed in the "hero" section of a page. (However, this means the image must be at the top of the page.)
Size Logos and Icons Differently
Logos and icons do not work well in the current CMS. In order to use logos or icons, they must be sized to at least 600x600 pixels and designed as a large graphic.
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.
Energy.gov Image Display Sizes
As explained above, all images in the Energy.gov CMS should be at least 1,200 pixels wide. Your image will be resized based on the type of page and the type of paragraph that it appears in.
You can see what size your image will appear as in the table below:
Page and Paragraph Type | Screen Size | Displayed Image Size (Estimated) in Pixels | Recommended Minimum Image Size in Pixels |
---|---|---|---|
Homepage: Energy.gov Group: Primary Featured Item | Wide Desktop | 744x725 | 800x800 |
Homepage: Energy.gov Group: Secondary Featured Items | Wide Desktop | 496x362 | 800x600 |
Large Mobile | 659x450 | 800x600 | |
Homepage: Primary Office: Primary Featured Item | Wide Desktop | 739x525 | 800x600 |
Large Mobile | 682x525 or 682x282 | 800x600 | |
Homepage: Primary Office Secondary Featured Items | Wide Desktop | 409x242 | 800x600 |
Homepage: Nested Office/Initiative | Wide Desktop | 1140x600 | 1200x800 |
Listing Paragraphs | Wide Desktop | 350x220 | 1200x800 |
Listing Paragraphs | Wide Desktop | 350x220 | 1200x800 |
Photo Gallery | Wide Desktop | 523x399 | 800x600 |
Large Mobile | 450x340 | 800x600 | |
Article: | Wide Desktop | 626x469 | 800x600 |
Large Mobile | 450x340 | 800x600 | |
Homepage: | Wide Desktop | 758x586 | 800x600 |
Article: Contributor | Wide Desktop | 100x100 | 400x400 |
Featured Item Paragraph | Wide Desktop | 280x344 or 642x222 (variable height | 800x600 |
Article/Topic: | Wide Desktop | 1240x39 | 1240x600 |
Homepage: | Wide Desktop | NOT OPERABLE | 1240x601 |
Home Page: | Wide Desktop | 1230x268 | 1200x400 |
Article: | Wide Desktop | 1060x795 | 1200x400 |
Article: | Wide Desktop | 820x615 | 1200x400 |
Page, Download Page | 1200x800 |