An official website of the United States government
Basic Image
Best Practices
Overview
When you insert an image as a stand-alone page component (i.e., not as part of a navigation button, list module, etc.), you must select how the image is to be used:
- “Image only”
- Image with caption
- Photo box
This topic covers the “Image only” use. When inserted as “image only,” an image is not packaged with a title or caption, but there are several image styles to consider: margin, border, and shadow and rounded effects. These styles can be applied individually or in combination, as illustrated by the two examples below. See more examples of image styles.
Image with shadow effect and standard-size border
Image with rounded effect and small border
- Basic ImageSee key tips and guidelines for working with basic images in the WCMS.
- TP4 UX Best Practices [PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.
General Guidelines
- Use image styles consistently.
- Keep the mixing of image styles to a minimum.
- For large detailed images, enable the large image viewer. This allows small-screen users to display the full-size image in a pop-up window. (An example image with viewer enabled is provided at the bottom of this page.)
- Use purely decorative images sparingly. (All decorative images should be flagged as such in the image properties.)
- Always pick the smallest version of an image that will work for the location and need. (When an image is uploaded to the WCMS, up to four alternative sizes are generated, based on the size of the original.)
Accessibility
- For non-decorative images, always provide meaningful alt text.
- Avoid using color as the only way to convey meaning (for example, in an image of a chart).
- Avoid low-contrast images. For more information, see the Color Contrast Analyzer.
- If an image has embedded text, test it on the smallest viewport to ensure that the text is legible.
- For infographics, charts, etc., create an HTML page with alternative text and provide a link to it. (Consider using the image share widget [link] instead of a regular image.)
Alt text descriptions seem simple, but they can be a bit challenging to write. Here are a few tips:
- Make certain content owners are involved in the writing.
- Describe the content of the image, keeping in mind context and target audiences. Are scientific terms relevant to the topic and audiences? Which visual details are relevant?
- Remember that alt text represents an image in any situation where it cannot be seen or displayed (search engines, screen readers, etc.), so be as accurate as possible but brief — no more than 125 characters.
- Do not use the phrase “image of” or “graphic of.”
Image with Standard Margins on Top and Right:
Creating a floating image: Note that you can left- or right-align an image so that adjacent text wraps around it. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Image with Large Margins (All Sides):
<strong>Creating a floating image: Note that you can left- or right-align an image so that adjacent text wraps around it. </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
No Border:
Basic Border:
With Large-Image Viewer Enabled:
Extra Small Border:
Small Border:
Standard Border:
Medium Border:
Large Border:
Shadow + No Border:
Shadow + Large Border:
Shadow + Rounded: