The Core Component Image Component is an adaptive image component.
The Image Component features adaptive image selection and responsive behavior with lazy loading for the page visitor as well as easy image placement for the content author.
The content author can use the edit dialog to edit the image asset such as applying a crop or rotating the image.
The image widths and additional settings can be defined by the template author in the design dialog. The content editor can upload or select assets in the configure dialog.
The current version of the Image Component is v3, which was introduced with release 2.18.0 of the Core Components in February 2022, and is described in this document.
The following table details all supported versions of the component, the AEM versions with which the versions of the component is compatible, and links to documentation for previous versions.
Component Version | AEM 6.4 | AEM 6.5 | AEM as a Cloud Service |
---|---|---|---|
v3 | - | Compatible | Compatible |
v2 | Compatible | Compatible | Compatible |
v1 | Compatible | Compatible | Compatible |
For more information about Core Component versions and releases, see the document Core Components Versions.
The Image Component comes with robust responsive features ready right out of the box. At the page template level, the design dialog can be used to define the default widths of the image asset. The Image Component will then automatically load the correct width to display depending on the size of the browser window. As the window is resized, the Image Component dynamically loads the correct image size on the fly. There is no need for component developers to worry about defining custom media queries since the Image Component is already optimized to load your content.
In addition, the Image Component supports lazy loading to defer loading of the actual image asset until it is visible in the browser, increasing the responsiveness of your pages.
By default, the Image Component is powered by the Adaptive Image Servlet. Please see the document Adaptive Image Servlet for details on how it works.
The Image Component (as of release 2.13.0) supports Dynamic Media assets. When enabled, these features offer the ability to add Dynamic Media image assets with a simple drag-and-drop or via the assets browser just as you would any other image. In addition, image modifiers, image presets, and smart crops are also supported.
Your web experiences built with Core Components can feature rich, Sensei-powered, robust, high-performance, cross-platform Dynamic Media Image capabilities.
The Image Component (as of release 2.23.2) supports Next Generation Dynamic Media remote assets.
Once configured, you can select assets from a remote Next Generation Dynamic Media service for your image component.
Scalable Vector Graphics (SVG) are supported by the Image Component.
For security reasons, the original SVG is never called directly by the Image Editor. It is called through <img src=“path-to-component”>
. This prevents the browser from executing any scripts embedded in the SVG file.
To experience the Image Component as well as see examples of its configuration options as well as HTML and JSON output, visit the Component Library.
The latest technical documentation about the Image Component can be found on GitHub.
Further details about developing Core Components can be found in the Core Components developer documentation.
The Image Component supports schema.org microdata.
The edit dialog allows the content author to crop and zoom the image.
Depending on if you have the Dynamic Media enabled or Next Generation Dynamic Media features enabled, the options available for editing images will differ.
If you are editing standard AEM assets, you can click the Edit icon in the context menu of the image component.
Start Crop
Selecting this option opens a drop-down for pre-defined crop proportions.
Once a crop option is selected, use the blue handles to size the crop on the image.
Rotate Right
Use this option to rotate the image 90° to the right (clockwise).
Reset Zoom
If the image has already been zoomed, use this option to reset the zoom level.
Open Zoom Slider
Use this option to display a slider to control the zoom level of the image.
The in-place editor can also be used to modify the image. Due to space limitations, only basic options are available in-line. For full edit options, use the full-screen mode.
Image edit operations are not supported for GIF images. Any such changes made in edit mode to GIFs will not be persisted.
If you have Dynamic Media features enabled, editing of the image itself must be performed in the assets console.
If you have Next Generation Dynamic Media configured, the Smart Crop option is available in the context menus of the component.
Use the dialog to adjust the smart crop.
For more information on Smart Crop, see this video on the feature.
The image component offers a configure dialog where the image itself is defined along with its description and basic properties.
Inherit featured image from page - This option uses the featured image of the linked page or the featured image of the current page if the image is not linked.
Image asset - This is automatically populated if Inherit featured image from page is selected. Deselect to manually define the image by setting the following options.
Alternative text for accessibility - This field allows you to define a description of the image for visually impaired users.
dc:description
metadata in DAM or of the current page if no asset is linked.Don’t provide an alternative text - This option marks the image to be ignored by assistive technologies like screen readers for cases where the image is purely decorative or otherwise conveys no additional information to the page.
&
, regardless of which Preset Type is selected.dc:title
metadata in DAM.Smart Crop and Image Preset are mutually exclusive options. If an author needs to use an image preset along with a Smart Crop rendition, the author will have to use the Image Modifiers to manually add presets.
The Image Component supports the AEM Style System..
Use the drop-down to select the styles that you want to apply to the component. Selections made in the edit dialog have the same effect as those chosen from the component toolbar.
Styles must be configured for this component in the design dialog in order for the drop down menu to be available.
You can define a list of widths in pixels for the image and the component will automatically load the most appropriate width based on browser size. This is an important part of the responsive features of the Image Component.
See the document Adaptive Image Servlet for tips for optimizing rendition selection by carefully defining your widths.
The Image Component supports the AEM Style System.
The Image Component supports the Adobe Client Data Layer.