Optimizing Custom Components' Images with WebP using Core Image Delegation

[VeenaVikraman]

Hi All,

I am trying to optimize all the images on my pages using Web-Optimized Image Delivery, as described in the documentation: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/web-opti... .

The documentation mentions that for custom components, we can achieve optimization by extending core components. I have a few components for which I am following the imageDelegate option. Therefore, I am directly including the Image V3 Core Resource to render the image. This approach is also used in the Teaser component. Basically I have followed the teaser component. However, when I enable Web Optimized Images for the Teaser, it renders fine, but it doesn't work for my custom component.

If someone has used this approach for their custom components, could you please let me know the steps to follow?

TIA

Veena ✌

[poojac_2204]

You can refer this section in https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/web-opti...

If not extending core component, plz check if your custom component using mentioned service interface to generate the desired src 

[VeenaVikraman]

Thanks @poojac_2204  I am aware of that. But what I am trying to achieve here is similar to the Core Teaser Component. So if you see the policies of the Teaser component , you can see 

I am trying to acheive the same in my component , where I can delegate the policies of Core Image V3. Core Image V3 has below option to convert images to webp

Thanks

Veena

[shubhanshu_singh]

In the custom component we can use the AssetDelivery API to get the web optimized image URL.
Web-optimized image delivery Java™ APIs | Adobe Experience Manager

[VeenaVikraman]

Yes @shubhanshu_singh . That is what the documentation says. I tried , but it didn't work yet. I am going to try it again today. Will see.