Sub page
Your website should look great displayed on every device - from mobile phones to large desktops - and one of the the basic elements of every website are images. These should best fit to browser dimensions.
How to ensure that your images look perfect across multiple devices? How to provide best image experience in different cases? Renditions feature is the answer.
Overview
Renditions feature enables you to display a single image in multiple ways. An image can be displayed in various versions, various sizes, with different cropping
- on different pages,
- for different browser's dimensions,
- for different Starter Kit components.
How to play with renditions? It's easy. First, configure a list of renditions dimensions (width and height) and a list of responsive breakpoints (ranges specified by minimum and maximum window width). Decide which rendition dimensions should be applied to given breakpoints for the components you work with (for example image, article list, rich text). You can provide as many renditon configurations for component as you need. Now it's ready for use on on your pages - apply configuration to component and see how images change dynamically depending on defined rules.
3 cases for renditions
Provide different image resolutions
You can provide rendition configurations to display the image of most suitable size on various devices. On mobile phones smaller images look better and also image load time is shorter. For tablets you would like to use intermediate image resolutions and the bigger ones for desktop. Also you can provide better resoultion for retina. These all together significantly improve user experience.
Provide different experience
In some cases you would like to serve totally different image content depending on the device. For example you would like to display a picture of a mobile phone on smartphones and a picture of monitor on desktop. Renditions feature provide you such possibility - just define which version should be displayed on which resolution.
Provide different parts of an image
Let's say you would like to use only a part of an image on chosen device, for example only a part of an image on a mobile phone. Renditions feature gives you a possibility to display cropped image on some devices and a full image on another ones.
Zen Garden renditions feature vs AEM renditions
| Zen Garden Renditions | AEM renditions |
| Custom configurations for each site | One, global configuration for all sites |
| Configured via dedicated pages by authors | Configured in OSGI console by administrators |
| Safe solution allowing for many windows widths configuration | Limited number of supported windows widths |
