Expand my Community achievements bar.

Serve images in next-gen formats

Avatar

Community Advisor

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?

Shiv_Prakash_Patel_0-1677232812186.png

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

Your input will be appreciated, thanks in advance.

Shiv Prakash

8 Replies

Avatar

Community Advisor

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

Shiv Prakash

Avatar

Level 2

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.

Avatar

Community Advisor

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.

Shiv Prakash

Avatar

Community Advisor

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... 

 

 

Shiv Prakash