Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Optimizing Custom Components' Images with WebP using Core Image Delegation


Community Advisor

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?







Veena ✌

4 Replies


Level 5

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 


Community Advisor

Thanks @poojac35931336  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






Community Advisor

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.