Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

Images are not loading in Webp format for Core Image component

Avatar

Level 4

Hello All,

 

There is one recommendation in Lighthouse report to load images in webp format. I did some research and I found we can use Web optimised image delivery option from Core Image component design dialog. Below is the ref link:
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/web-opti...

I am able to see webp images are getting loaded for core image component. 

But In our project we have custom image component and we need to extend core v2 image to use Web optimised image delivery option. So I added jcr property to Image component sling:resourceSuperType = core/wcm/components/image/v2/image and we are using fileupload resourceType to add image. See below:

supriyahande_0-1691506691571.jpeg

 

I deployed above changes to dev instance(AEM cloud 6.5) and I able to see Web optimised image delivery option in Image design dialog inside templates. I checked this option but when I authored this custom Image component on page, images are not loading in webp format. Anyone have any idea what could be the issue? Or is it related to cloud version?

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @supriya-hande 

 

Are you seeing any exception in the log once the image is dropped?

What I would try is:

  1. Create a new proxy component from image V2
  2. Author this new component with the webp to check if it's loading the image

This way we can identify if your custom component is having an issue with its implementation.

 

Thanks,

Kiran Vedantam.

 

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hi @supriya-hande 

 

Are you seeing any exception in the log once the image is dropped?

What I would try is:

  1. Create a new proxy component from image V2
  2. Author this new component with the webp to check if it's loading the image

This way we can identify if your custom component is having an issue with its implementation.

 

Thanks,

Kiran Vedantam.