Image allows a single image asset to be added to the page.
For general information about the Image Core Component, refer to AEM's Image Component documentation.
Usage guidelines
Here are some image best practices:
- Do not add image-based gradients, background colors, or decorative treatments into images — use the options available within the style system
- Try not to use images of text or images with text — the only exception to this is labels on graphs and charts
- Always add alternative text (see information below)
- Be mindful of image file size
- Most images should be 100kb or less
- Hero images should be 100kb-300kb
- Use file names that are descriptive — this will help with SEO
For more information on hero images, refer to the Teaser hero component.
Alternative (alt) text
Alt text is crucial for users who navigate the web with a screen reader. In the absence of alt text, the screen reader announces the file name (which is often unhelpful, at best). Alt text is also a key factor in search engine ranking, and it shows up in place of an image if it fails to load for any reason.
Missing or inaccurate alt text results in a massive amount of content/data being lost to some disabled users, and to all users if images aren't properly loaded.
For more information on how to add images accessibly, refer to Anatomy:
Anatomy, Accessibility – Images
Image behavior
The Image Component is fluid — meaning: the image will scale proportionally to fill 100% of the width of the component. The width of the component can be adjusted through responsive authoring.
Scalable vector graphics (SVGs)
SVGs use an XML language to find vector images. SVGs are used to render vector-based graphics and can be rendered at any resolution or size without a loss of quality. This means that the user can zoom out or in on an SVG and it will never become blurry or pixelated. Because of this, SVGs are the most accessible image format for low-vision users. SVGs should be used for complex images whenever possible.
The following should always be SVG files:
- Icons
- Logos
- Text graphics
- Diagrams
- Charts
- Maps
- Graphs
- Any vector-based graphic
Decorative treatment
The decorative treatment should be used to emphasize an image that is central to the content of the page. This style is also available to add to embedded content. Do not overuse the decorative treatment. The caption will automatically be set to assertive when using the decorative treatment.
There are four options for the decorative treatment types:
- Bottom left corner
- Bottom right corner
- Top right corner
- Hard dropshadow
The bottom left, bottom right, and top right corner treatments will be 60% of the image’s width and height.
There are four color options to choose from to apply to the decorative treatment:
- Primary accent
- Secondary accent
- Primary gradient
- Secondary gradient
Bottom left corner, primary accent
Top right corner, secondary accent
Hard dropshadow, primary gradient
Bottom right corner, secondary gradient
Image captions
Add an image caption when the image needs further explanation or description. Image captions should not be longer than two sentences. Descriptive image captions also help with SEO.
Default caption
Default should be used for any image whose caption does not need to be emphasized. The default caption can be set to the black or ghost text style. Only use the ghost text style on the assertive and accent swatch containers.
Example of an image caption.
Example of an image caption.
Assertive caption
The assertive caption style should be used if the caption needs to be emphasized and is important to understanding the content of the image. The assertive caption has a 60% opacity of the darkest neutral color to ensure readability on any image.
Example of an image caption.
Example of an image caption.
Top margin
Default
Increase by two steps
Increase by one step
Decrease by one step
Decrease by two steps
Remove
