Render image fields using transformation settings
SXA lets you add the Responsive Image field to scale and size your images correctly. If you work with the Sitecore Content Hub, you can also use the transformations set there for your SXA images. To do that, you must create a mapping in Sitecore that you can use in the responsive image variant item definition.
Set the transformation
To specify the image width, height, and quality:
Open the Sitecore Content Hub, and on the ribbon, click Manage.
Click Settings, and click Transformations and specify image width, height, and quality. For example:
Create the transformation mapping item
For each transformation definition in the Sitecore Content Hub, you must create a transformation mapping item.
To add a transformation mapping:
In the Content Editor, navigate to:
/sitecore/system/Settings/Feature/Experience Accelerator/Stylelabs/, right-click Transformations, click Insert, and click Transformation.
Enter a name and click Ok.
In the Properties section, in the Transformation.Name field, enter the transformation name from the Sitecore Content Hub.
Configure the rendering variant
To add the mappings to the Responsive Image rendering variant:
In the Content Editor, click the Responsive Image item of your rendering variant.
In the Stylelabs Variant Details section, in the MWidths field, specify the widths. Use the left column to specify the maximum image width, and the right column to select the transformation mapping item.
When you now add a rendering to a page, and select a Stylelabs image in your datasource and apply rendering variant with
MWidthmapping, the transformation settings will be used.
Depending on the screen size, a different image will be loaded. Links are similar to links without transformation mapping, but adds parameter t for sizes with assigned transformation name. For example: