Enabling Smart Imaging for Custom Components

[zumi512]

Hi all,

We created some custom List Component that sorts items based on a custom property value.

We're trying to enhance image delivery performance by enabling Adobe Dynamic Media's Smart Imaging technology for these components.

Up to now, we have created a service that retrieves the full Dynamic Media Scene 7 URL of the image asset and passes it as the src attribute to the <img> tag.

Is there anything else we must do?

Newbie here for Dynamic Media things.

Environments:

- AEMaaCS

- Dynamic Media Scene7

- Core Components 2.23.2

Thanks in advance.

rzumi

[Saravanan_Dharmaraj · Accepted solution]

@zumi512 Smart imaging delivers the optimized image based on client browser and network conditions. It delivers the image in the new AVIF/WebP format . You need to raise the ticket with Adobe to enable Smart Imaging with DM Scene7 if its not enabled already. You can also ask them to create a domain to deliver s7 assets. Once enabled you can verify the images downloading as avif/webp format in the browser's developer tools network tab.

As long as you are building the url properly to render the image from scene7 , you are good with smart imaging. But there are tweaks you can do to enhance given in this documentation

https://experienceleague.adobe.com/docs/experience-manager-65/assets/dynamic/imaging-faq.html?lang=e...

Hope this helps!

[zumi512]

@Saravanan_Dharmaraj At first, we'll create a ticket to enable Smart imaging and check if our custom components works with it.

Thanks!!🙂

[sherinregi]

Hi @zumi512 

To enable smart imaging as suggested by @Saravanan_Dharmaraj  you will have to request for a subdomain something like urcompany.scene7.com and the smart imaging will be enabled over the same. DM server will deliver the images in AVIF/Webp format.

For you to verify if its working as expected you can also look for the below response header along with the content type.

[zumi512]

@sherinregi Thanks! This helped us much too.