Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

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.

8 Replies

Avatar

Community Advisor

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

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.

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