You are here

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 TypeScreen SizeDisplayed Image Size (Estimated) in PixelsRecommended Minimum Image Size in Pixels
Homepage: Energy.gov Group:
Primary Featured Item
Wide Desktop744x725800x800
Homepage: Energy.gov Group:
Secondary Featured Items
Wide Desktop496x362800x600
Large Mobile659x450800x600
Homepage: Primary Office:
Primary Featured Item
Wide Desktop739x525800x600
Large Mobile

682x525

or

682x282

800x600
Homepage: Primary Office Secondary Featured ItemsWide Desktop409x242800x600

Homepage: Nested Office/Initiative
Primary Featured Item

Wide Desktop

1140x600

1200x800

Listing Paragraphs
(Static and Dynamic)
Thumb, Title, or Teaser

Wide Desktop

350x220

1200x800

Listing Paragraphs
(Static and Dynamic)
Title, Summary,
Background Image, and Date

Wide Desktop

350x220

1200x800

Photo Gallery

Wide Desktop

523x399

800x600

Large Mobile

450x340

800x600

Article:
Photo Gallery Paragraph

Wide Desktop

626x469

800x600

Large Mobile

450x340

800x600

Homepage:
Photo Gallery Paragraph

Wide Desktop

758x586

800x600

Article: Contributor

Wide Desktop

100x100

400x400

Featured Item Paragraph

Wide Desktop

280x344

or

642x222

(variable height
title/description)

800x600

Article/Topic:
Banner Image

Wide Desktop

1240x39
(variable height
title/description)

1240x600

Homepage:
Image Paragraph
Breakout Full Width

Wide Desktop

NOT OPERABLE

1240x601

Home Page:
Image Paragraph
Center Full Width

Wide Desktop

1230x268
(full height)

1200x400
(max height)

Article:
Image Paragraph:
Breakout Full Width

Wide Desktop

1060x795
(full height)

1200x400
(max height)

Article:
Image Paragraph:
Center Full Width

Wide Desktop

820x615
(full height)

1200x400
(max height)

Page, Download Page

  

1200x800