Serve images in next-gen formats

[Shiv_Prakash_Patel]

Hi,

I am checking the core web vital assessment report and It suggests using images in next-gen format. i.e Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.

Can we use WebP or AVIF in AEM 6.5 or any other option to improve image load time as shown in the report?

As per the below queries & documents, WebP doesn't support AEM6.5.

• https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-assets/aem-6-5-assets-supp...
•  https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/is-webp-supported-in-aem-6...
• https://experienceleague.adobe.com/docs/experience-manager-65/assets/administer/assets-formats.html?...

Your input will be appreciated, thanks in advance.

[Manu_Mathew_]

@Shiv_Prakash_Patel  Are you using dynamic media?

[Shiv_Prakash_Patel]

No, we are not using dynamic media.

[Manu_Mathew_]

@Shiv_Prakash_Patel You could use lazy loading to improve performance 

[Shiv_Prakash_Patel]

We are using lazy loading, and it has already improved performance somewhat.

[Art_Bird]

Look into imageMagick. It supports the file types you listed.
https://imagemagick.org/script/formats.php

Here's some docs on adding and using it.
https://experienceleague.adobe.com/docs/experience-manager-65/assets/extending/best-practices-for-im...

I've used it in the past to convert cmyk images to rgb during the workflow that creates the image size renditions.

You would need to reprocess all your images in batches to get the new format added for each one. Depending on the number of images, it could eat up a lot of drive space and take days to finish.

[Shiv_Prakash_Patel]

I got your point to convert the image from JPG/PNG to WebP by reprocessing. But it's not supportable in AEM 6.5 so looking for any other option to improve the image load performance.

[Rohit_Utreja]

@Shiv_Prakash_Patel 

A similar thread in the past.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-assets/aem-6-5-assets-supp...

I hope it helps.

Thanks,

Rohit

[Shiv_Prakash_Patel]

Thanks for the response @Rohit_Utreja , I have marked this thread in my question only. I am not looking for any option to convert webp to any other format through workflow or using any other library.

I am looking to load the image in NextGen format so can optimize the page speed.

I got some solutions and working on them.

As ACS commons give image transformation so we can upload the image in the DAM with their original format and transform it to webp.

Reference - https://adobe-consulting-services.github.io/acs-aem-commons/features/named-image-transform/index.htm...