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.
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
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.")
Store and reference all images from a subdirectory labeled "images."
Following these guidelines make your images Section 508-compliant.
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.
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.
Do not use color alone to convey meaning. This makes your image impossible to understand for colorblind users.
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.
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.