Images

Overview

Adding images and video to your content can create a compelling and visually engaging experience. There are many Blocks and Patterns that leverage images and video, and it is important to optimize images and video in a format appropriate for displaying on the web, ensuring a balance of high quality presentation, fast web performance, and accessibility.

Image Formats

(In order of preferability)

  • WebP: Preferred choice for still and animated images. Offers better compression than JPG, PNG, and GIF. Supported in Chrome, Edge, Firefox, Opera, Safari.
  • SVG: Ideal for vector formats. Great for logos, icons and other interface elements. 
  • JPG: Most common still image format. Recommend running through an image optimizer.
  • PNG: Use for still images when transparency is needed. Recommend running through an image optimizer.
  • GIF: Most common animated image format.

Optimizing Images

  • Images can be compressed for the web using an image compression tool like ImageOptim or TinyPNG.
  • Ensure a resolution of 72ppi and aim for a max file size of 200 KB.

Alternative Text

Images that present information only through visuals are not accessible to people who are blind or have low vision. Alternative or “alt” text is the written copy that appears in place of an image on a webpage if the image fails to load on a user’s screen. This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website.

Adding alt text using Block Settings

You can add the alt text from the Block Settings.

Adding alt text from the Media Library

One of the easiest ways to add alt text is to add via WordPress Media Library whether its content image or feature images. One of the best things about using this method is once you add alt text to the media library, the images will automatically fetch alt text when you insert it in a WordPress page or post. If you are retroactively adding alt text to multiple images across multiple pages or posts, the Media Library is the most effective method.

  1. Go to Dashboard → Media. 
  2. Upload a new image or click on an existing image of which you want to add alt text.
  3. Once you click an image, a popup will open that allows you to add and edit alt text and title text to the WordPress image.

Tips for using alt text:

  • All images require alt text. “Title” and “Description” attributes are optional. 
  • For purely decorative images, simply enter Decorative. A screen-reader will announce “image, decorative” and the user will understand the image does not relay any pertinent information.
  • Keep the description succinct, try to use 125 characters or less.
  • Communicate the content and function of the image.
  • Take into account the surrounding context of the image.
  • Update the text alternative if an image changes over time.
  • Include any visual information that is conveyed solely by color differences.
  • For linked images, convey the destination of the link in the alt attribute.

What to avoid:

  • Do not put the words “image of…” or “graphic of…” at the start of the alt text.
  • Do not use the filename as the text alternative, such as “OfficePhoto.jpg”.
  • Do not repeat the same information contained in an adjacent caption or surrounding text.
  • Do not use the CSS background-image property to include images that convey important information.