Graphics Standards

Images (e.g., photographs, icons, and illustrations) can communicate a great deal of information while adding visual appeal to Web pages. At the same time, images on the Web cause increased download time and accessibility issues, potentially causing users to leave without seeing your content.

The following sections provide guidelines on how to prepare your graphics for fast and accessible delivery on the EERE site.

General

Design site graphics and colors for no higher than a 16-bit color display.
Store and reference all images from a subdirectory labeled "images."

EERE Photo Treatment Style

It is recommended in most cases that photos be "sharpened" in Photoshop using the standard sharpen filter "Filter/Sharpen/Sharpen."

Photos should be outlined with a 1 pixel line of the hex color #666666. There should be no shadow or bevel treatment applied to photos. The outline should be applied as: "Edit/Stroke/Inside." Please be sure that the stroke is applied "inside" the selected photo and not "outside."

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, or an alternative photo should be used in these cases.

EERE Web Graphic Style

Feature graphics should be outlined with a 1 pixel line of an appropriate complementary color. The outline should be applied as: "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.

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.

Myriad Bold can be used as an alternative headline font, or in conjunction with Helvetica Neue Bold Condensed as a subtitle. Myriad Bold should be used at a font size no smaller than 12 pt.

If text is set in Photoshop, a text attribute of "Crisp" should be applied to all of the text options previously listed. (Do not use "None", "Sharp", "Strong", or "Smooth".)

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.

Graphics other than features (those used within the body of EERE Web pages) should have similar treatment and style. The EERE fonts and colors should be used whenever possible.

508

Alt Text

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

Graphic Text

Color contrast — 508 guidelines state that there must be sufficient contrast between foreground and background colors to prevent problems for those who have color deficits.

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

Use Only GIFs and JPEGs When Making Graphics

Consider the following when choosing GIF or JPEG.

JPEGs retain a full spectrum of color and are good for gradients, but compressing them makes them lose pixels. When compressing a JPEG, do not go below setting 6 (high). Compression lower than 6 degrades the picture.
GIFs are better for solid colors and text but can be used for photos as well. Because few colors are used, gradients can become banded. GIFs generally have smaller file sizes than JPEGs.
Test the design/layout on the standard browser set, checking for consistent color, layout, display, and relationships among elements.

Carefully consider download time when cutting larger images into many smaller sections.

Small graphics download faster, but if there are many of them, the download slows because the browser keeps going back to the server for each piece.
A medium-sized, single graphic can also work within a strict download time, because the browser goes to the server just once.
Testing both options is often necessary for specific situations.

Optimize Graphics for a Faster Download Time

All graphics files should be saved at 72 dpi.

For GIFs:

Index colors at 256 or lower.
Turn off interlacing (it adds to the file size).

For JPEGs:

Compress file at no lower than setting 6 (high). Compressing a JPEG more than that can cause the quality of the graphic to degrade.
Note that using "Progressive Scan" will add bytes to the file size.
Use either "Baseline Standard" or "Optimized" under "Format Options."

Photoshop Filter > Sharpen > Sharpen should be used on all photos and images for better quality.

Using Transparency in GIFs

Using transparency adds to the size of the file, so gauge the use of this against the importance of download time.

Use transparency when the graphic is over a tiled or bin-hex colored background, or when the white of the graphic's background is giving a "halo" (off-color) effect.

Digital Photos

Use photos that are at least 640x480 pixels (don't use a camera phone).
Use the original image files, not images that have been resaved as JPGs or GIFs (no recompressed images).
If possible, take all of the photos in the same location so that the lighting and backgrounds are similar.