Images

Images support written content in conveying an idea or message so they must meet the same goals as the content. Things to consider:

  • Try to find pictures that serve the purpose of your page.
  • Images need to be uploaded in the AEM environment before you can insert them on a content page.
  • Content systems like AEM have different components that allow you to add images in different ways to change the user experience (background image, hero banner, static square, click to zoom, gallery, cards, content blocks, etc.). See available Components.
  • Responsive web protocols may automatically resize or crop images depending on the screen size, regardless of the image that is uploaded.

Accessibility requirements for images

See also Visual design accessibility.

Image placement on a page

  • Try to place images at the top of a page, so they are visible for most users before they have scrolled very far down the page. But if an image is related to specific content on the page, it is more appropriate to place the image directly adjacent to that content.
  • Avoid too many instances of "zig-zagging" photos where there are images in both the left and right columns.

  • Photo slideshows can be used in situations where multiple descriptive photos are relevant to page content, and when the content itself is the image (such as a collection of artwork). However, don't place important content images inside slideshows, because many people will not bother to click through to see all the images.

Charts and diagrams

Charts and diagrams can show information that cannot easily be communicated in text, or information that will resonate more deeply with users in graphic form. The visual format will catch users eyes, whereas they may skip over a list of numbers in the middle of text.

Charts and diagrams are typically not accessible, unless you add the right accessibility functions. See also Visual design accessibility.

If charts are displayed as an image and include vital information, be sure to replicate it in text on the page. This helps both visitors accessing the page using a screen and search engines crawling the information.