Dynamic media image presets - How can we use it image component or on the site?

[gvaem]

With the Dynamic media, can we use image presets with in the image core component? If so how can we use it?

So if we upload a image, pre defines image presets are rendered. But when we add the same image to the page, srcset is not showing any of the presets. So so how is the preset helpful vs responsive widths with in the template policy?

[EstebanBustamante · Accepted solution]

Hi 

Yes, the Image component has built-in support for DynamicMedia, so you can use features like Image Presets, smart crop and image modifiers, but you need to first enable this feature from the component policies. Please check this link which explains in detail how to enable this feature and explains what you are trying to accomplish: https://experienceleague.adobe.com/docs/experience-manager-learn/assets/dynamic-media/dm-with-aem-si... 

Hope this helps.

[mayuri261191]

Can you please explain when to use image presets and when to use smart crops or both of them used in combination and how it renders the images to different view port ?

[EstebanBustamante]

Conceptually, both are different, and you cannot use them both at the same time. Smart crops leverage AI to crop the image and hence keep the focus point of the image, but a preset is a manual crop that will be dictated by measures given by the author.

You can learn more here:

https://experienceleague.adobe.com/en/docs/experience-manager-learn/assets/dynamic-media/tutorials/c...

https://experienceleague.adobe.com/en/docs/experience-manager-learn/assets/dynamic-media/tutorials/c...

Hope this helps.

[mayuri261191]

Thanks for your response. I had gone through the link you have shared. But I am unable to understand how we can leverage Dynamic media features in my custom component where I have other properties also in the dialog and do I need to go with Image presets for implementation or Smart crop ? Can you please share any example where we have leveraged DM features in custom component.

(I want to render the same image to different devices without losing image quality and performance etc)

[kautuk_sahni]

@gvaem Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.