Images

Guidelines for including images in digital products.

On this page:

Best Practices

Use meaningful images to enhance the content.
Avoid decorative images.
Avoid using images of swamps, alligators, beads, or sunset images unless they are real information.

Content Images

Content images are images which have meaningful information in them.

Content images should contain Alt Text.
Apply img-fluid to images to make them responsive. This makes the image fit its parent container. Height is automatically adjusted by the browser to preserve the aspect ratio.
You may optionally add the rounded class to put rounded corners on the image.

Person using a laptop, with notebooks and a pen.

<div class="row mb-12">
  <div class="col-12 col-md-6 col-lg-4">
    <img
      alt="Laptop, filled coffee cup, notepad, pen, and phone on a desk."
      class="img-fluid rounded"
      src="/img/photos/pexels-photo-5077047.jpeg" />
  </div>
</div>

Decorative Images

Non-content images may be requested by the Stakeholders and Project Owners. In this case, consider the following guidelines:

Try to use images which do not distract from the content.
Content images should use Alt Text with an empty value.

<div class="row mb-12">
  <div class="col-12 col-md-6 col-lg-4">
    <img
      alt=""
      class="img-fluid rounded"
      src="/img/photos/pexels-photo-2317711.jpeg" />
  </div>
</div>

Writing Alt Text

When writing alt text, keep the following in mind:

Be specific; describe the image for users who cannot see them.
Keep it short as possible, but descriptive. Try to keep it around 150 characters.
Don’t include phrases like “Image of…” or “Picture of…”
Use a simple, descriptive sentence and the appropriate punctuation.
Alt text describes the image, it’s not a caption.
Alt text does not need to include any copyright information.

Resources

Page top