How AEM DAM Asset renditions are getting used in AEM?

Question

I know that while uploading any Image/Asset into AEM DAM will create the renditions, but am wondering that how these renditions are going to be used?

Generally when doing content authoring we will be pointing to the DAM asset paths only, but never saw using particular renditions paths of the image. can anyone help me to give an example for using this renditions.?

Answer 1

The most common use case it to have "responsive" images by making use of the picture element (requires polyfills like picturefill.js when used with IE).

Here's an example taken from the Adobe documentation on Adaptive images:

<div data-picture>
    <div data-src='/content/dam/geometrixx-media/articles/meridien.png'></div>                                        
    <div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png'    data-media="(min-width: 769px)"></div>  
    <div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.140.100.png'   data-media="(min-width: 481px)"></div>     
</div>

As a result, the appropriate image will be rendered for the viewport breakpoints defined in data-media.

Answer 2

You can also consider using Named Transform Image Servlet that comes with acs-aem-commons package. It is handy to control many aspects of the image dynamically using just the image URL.

https://adobe-consulting-services.github.io/acs-aem-commons/features/named-image-transform/index.html