Set rendition properties on images
Renditions automatically render a version of the image that is best suited for the device connecting to the site.
- Select an image and open the rendition section in the image form.
- To upload a version of the image that is sized for the purpose, select the rendition, such as desktop. We can choose from desktop, tablet, smartphone, or none. We can upload a main image, but it is not required if we have an image that is uploaded into the default rendition spot.
- We can replace a rendition to scale and crop the image for each device size.
- In the authoring template for image elements, we can disable renditions for an element or set preferred pixel or file sizes in the properties section.
- When we are finished, click Place Rendition.
Results
For component and element tags that reference an image the attribute rendition="auto" renders the rendition based on the current device class, such as tablet. If that rendition is empty it renders the default rendition desktop per default, which is defined with default.rendition.name in the Web Content Manager Config Service Resource Environment Provider. If that is empty, it renders the main image.
For component and element tags that reference an image with the rendition attribute set to either desktop, tablet, or smartphone the specified rendition is rendered and no fallback is performed. Specifying rendition="none" renders the main image.
If we do not specify the rendition attribute, the main image renders.
If we do not specify the rendition attribute, rendition="auto" is the default.
Parent topic: Renditions