Graphics Standards

Here you'll find the requirements and best practices for developing images for the EERE website. Images can communicate a great deal of information while adding visual appeal to Web pages. However, you need to be aware of EERE's requirements and how to make your images Section 508-compliant.

Requirements

All images must follow these requirements.

Sizing Images for the 2003 Template

Sites that have not been moved to the "new" template should follow these guidelines. These are the maximum sizes for images in the 2003 template.

In the office template, your images cannot be wider than:

535 pixels for 3 column layouts
695 pixels for 2 column layouts

In the corporate template, you cannot have images wider than 546 pixels.

Feature Graphics in the 2003 Template

Feature graphics should be outlined with a 1 pixel line of an appropriate complementary color. The outline should be applied with "Edit/Stroke/Inside." Please be sure that the stroke is applied "inside" the selected graphic and not "outside."

Feature text may have a drop shadow applied to the text only if it improves the legibility. There should be no bevels or other treatments applied to the feature text.

Graphic features in the right column should be exactly 249 pixels wide.

Feature Graphics should use Helvetica Neue Bold Condensed as a headline font. Helvetica NBC should be used at a font size no smaller than 16 pt. Scope notes within feature graphics should use Myriad Regular at a font size no smaller than 10 pt. A text attribute of "Sharp" may be applied to Myriad Regular on very small text to make it more legible.

Sizing Images for the Current EERE Template

The maximum width for images in the current EERE template is:

500 pixels for three column pages
680 pixels for two column pages

However, images can be made smaller to allow for text wrapping. A general width of 250 pixels allows for a good-sized image and acceptable text wrapping.

Feature Graphics in the Current Template

Features can be placed either in the "gray box" on a home page or in the right column of a content page. Feature graphics should be cropped to 54 x 49 pixels. Add a sharpen filter.

Graphs and Illustrations

Graphs and illustrations should use the EERE color palette. If you need additional colors, contact the Communication Standards Webmaster. An extended palette is available.

Fonts

Fonts are defined in the style sheet as "Arial, Helvetica, sans-serif". Text created within graphics should also use Arial. If set in Photoshop, a text attribute of "Crisp" should be applied. (Do not use "None", "Sharp", "Strong", or "Smooth.")

Directories

Store and reference all images from a subdirectory labeled "images."

Accessibility

Following these guidelines make your images Section 508-compliant.

Alt Text

Screen readers use alt text to provide visually impaired users with a description of a graphic. See the guide to writing alt text to ensure your site complies with Section 508 standards.

Color Contrast

508 guidelines state that there must be sufficient color contrast between text and its background color. EERE aims to meet at least AA-level conformance on W3C's Web Contrast Accessibility Guidelines.

Color Selection

Do not use color alone to convey meaning. This makes your image impossible to understand for colorblind users.

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 a 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.")
Be sure photos are not so wide that they cause scrolling on monitors set to 800 x 600 resolution.
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.