Images

Adding images can help bring life to the page and break up text-heavy pages, when done properly. Well-crafted photos also play an important role in bringing our brand DNA to life.

Below are examples of how to use and display images for different purposes.

Images Overview

Images can be added as part of a text and image component, part of a banner image, carousel or an image gallery / slideshow.

Image Component

Overlay banner image

Image Gallery Component

1 / 7

Text and Image Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum condimentum metus ut bibendum. Nunc non lacus varius, sagittis lorem eu, ultrices augue. Duis vitae felis euismod, pretium lectus sed, rutrum nisl. Aenean et est urna. Curabitur nisi justo, venenatis a vestibulum vel, iaculis in augue. Suspendisse mollis imperdiet lectus sit amet convallis.

Best Practices

Use a high resolution – For banners and large images, make sure images uploaded are high resolution, above 2000px wide and 144 dpi or larger if possible.
Always upload image to the DAM - When an image is uploaded to the DAM, AEM will process the image and create a variety of renditions (small, medium, large). AEM will then select the right rendition to use for a given component. Images that are uploaded directly to the component will not be processed. The image may end up being too large for the context and may result in a slow-loading page.

Do not use Text embedded in images - Do not use images with text as part of the image. Adding text to an image is not accessible for users who require screen readers. It can also display too small to read on mobile devices or blurry in other views. Instead, use the Text and Image component with the banner classes to add text on top of your image.
Include Alt Tags – Always include alt tags with your images as a description of your image (e.g., Students smiling and sitting outside on a sunny day). Alt tags display text when the image cannot be shown for technical reasons. They are essential for screen readers and accessibility.

Note:

Image file types - need to be one of the following: jpeg, png or gif
A white background is automatically added to .png and .gif files with a transparent background because AEM optimizes images in the DAM, reducing their file size so that web pages load quickly.

Communicators Toolkit