How to load image for mobile , tablet and desktop through custom image rendition ?

[hetbv]

I am taking image from the path field now I want to load custom image for mobile, tablet, and desktop through image rendition.

[Sudheer_Sundalam]

@hetbv ,

If you are using Dynamic Media Scene7, then you can use Smart Crop to load the images based on the viewport.

Please see information here: https://experienceleague.adobe.com/docs/experience-manager-learn/assets/dynamic-media/images/smart-c...

[Nishant-Singh]

You should use AEM Core Components - Image component is having  Adaptive image feature that can be used in your case where different width can be defined in policy and component use best image rendition based on screen size.

If you really need to create a custom component and use custom renditions then you can use HTML 5 Adaptive image feature - you need to create below html structure to use this feature.

<img src="/content/dam/abc/Untitled.jpg" srcset="/content/dam/abc/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png 1x,/content/dam/abc/Untitled.jpg" alt="Sample Image">

Example of image src set  :  https://codepen.io/pixelstrolch/pen/yVbdea

[hetbv]

Hello @Nishant-Singh ,

Thanks for your quick response!!

I am new to AEM. I have defined a custom rendition of image through a DAM Update Asset workflow. How we can provide dynamic value from the component path field of the image in the IMG tag?

Would you help me out with this?

[Nishant-Singh · Accepted solution]

You can write your logic to get rendition paths in you Model class.

i.e com.adobe.guides.wknd.core.models.BannerImage

alternatively you can use directly use below snippet -

<div data-sly-use.bannerImage="com.adobe.guides.wknd.core.models.BannerImage">
<img src="${bannerImage.imagePath}" srcset="${bannerImage.imagePath}/jcr:content/renditions/cq5dam.thumbnail.319.319.png 1x,${bannerImage.imagePath}/jcr:content/renditions/cq5dam.thumbnail.48.48.png" alt="My Image">
</div>

[DPrakashRaj]

Your aem instance there should be out of the box rendition being generated, you can customize that to create the rendition size that you intended to work with. Next on html you can work with image tag with data-interchange option which will automatically loads the image as per device