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:

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

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 AnalyzerExternal.
  • 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.)
How to Write Effective Alt Text

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.”

  • Photo_02

    Go to ExamplesSee examples on this page that illustrate key options.

  • Tools_01

    Building in the WCMSSee key tips and guidelines for working with basic images in the WCMS.

  • Photo_02

    TP4 UX Best PracticesCdc-pptFor general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.

Examples

Image with Standard Margins on Top and Right:

Example image

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):

Example image

<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:

Village on sea

Basic Border:

Village on sea

With Large-Image Viewer Enabled:

Extra Small Border:

Small Border:

Standard Border:

Medium Border:

Large Border:

Shadow + No Border:

Shadow + Large Border:

Shadow + Rounded:

Page last reviewed: May 10, 2018
Content source: WCMS / Template Team