While galleries and text-wrapped images can look nice with certain layouts, they don't fit the current design of our sites. As such, there are a few guidelines you can follow to ensure that your content is readable, accessible and meets our content quality standards.

Use High-Quality Images

While you should use well-composed images, this specifically refers to photos that are high-quality in a technical sense. These high-quality images should follow these guidelines, they should:

• Be Large in Size
  • Images are ideally at a 3:2 or 2:3 resolution
  • Images should be at bare minimum 600 px in width
  • Images should ideally be 1200px by 630px
• Have Good Contrast
  • Make sure the image is "readable", there should be a difference in the dark and light colors of the image.
  • Stay away from filters on images that fully change the color profile (e.g. sepia tone filters)
• Be Relevant and Necessary
  • Don't Include images just to have an image on an article
  • Make sure the image helps to build context for your content

Center-Align and Block Your Images

While a layout with text-wrapped images may look nice, in general, it's not a good practice. Users with screens of different sizes may end up with wildly different experiences that you can't control. By Center-aligning an image, you are giving the content its own space separate from the text. The image will scale down to fit the screen size but without affecting the text around it.Give content room to breathe, it's better to have more whitespace than less. This is doubly true when accessibility is kept in mind.

Caption or Provide Alternative Text (alt-text)

Captions or Alt-text are required. To stay in line with accessibility requirements, you must include text that can replace any images in your posts and pages. This text is required, with the only exception being that the image is decorative only. If the image does not provide context to the article, or if the content of the image is replicated in the body of the post or page you do not need to provide captions or alt-text.This text can be added in one of two ways, captions and alternative text.

Captions

Much like in textbooks, captions are text provided alongside, or in our case, below, an image. This text is visible to sighted users and is great when providing additional context alongside images. Captions are great for giving more information about a graph, they can also be used to list the individuals in a group photograph.

Alt-Text

Alternative text is not included alongside the image for sighted users. Traditionally it has only been displayed if the image resource is not available, though now it is more commonly used by e-readers to describe to users the context of the image in the article. The A11y collective has a great resource on generating quality Alt-text.