Adobe Experience Manager Sites & More

martinkastler · 11/15/23

Request for Feature Enhancement (RFE) Summary:	Image component loads rendition based on screen size, not target image size.
Use-case:	Google Lighthouse score complains that images are too large. Images should be sized depending on their target size. Our portrait thumbnails are loaded mostly at 1600 px width (based on screen size), although thumbnails only need to be around 500 px width across most screen sizes. Introducing the HTML "sizes" attribute did not solve the issue. The only thing that helped so far is to upload small-scale images for thumbnails. But we don't like that approach. Editors should not be required to think about images resoluition. They should just upload their high-res images and AEM Assets does the magic.
Current/Experienced Behavior:	Thumbnail-sized images are loaded at 1600 px and scaled down by the browser to fit into the target space leading to unsharp images or image artifacts. See attachments.
Improved/Expected Behavior:	The Image component loads a rendition that fits best for the target height and width.
Environment Details (AEM version/service pack, any other specifics if applicable):	AEM as a Cloud Service
Customer-name/Organization name:	VERLAG DES OSTERREICHISCHEN GEWERKSCHAFTSBUNDES GMBH
Screenshot (if applicable):	See attachment.
Code package (if applicable):

kautuk_sahni · 11/21/23

@martinkastler

Thanks for proposing this idea

This has been reported to the engineering under the internal reference ASSETS-31809. The product team will triage this request to verify feasibility based on the prioritization model. This post will be updated according to the Jira request status.

scyoung · 11/28/23

if you use the AEM Core image component v2 it will dynamically resize the image based on the container it is in. You can also define rendition size options using the design dialogs.

martinkastler · 11/29/23

Hello!

We use v3 with Web-Optimized Image Delivery without the AEM layout grid. The image component always loads images with 1600px and we don't know the reason.

alext79299363 · 1/9/24

@martinkastler this is a perfect use case for Dynamic Media because you can resize the image to the smaller dimensions without having to upload a separate file, and you can also apply sharpening as a parameter so the image looks crisp.

If you don't have DM, you can also create the smaller renditions by default by configuring a processing profiles so tat when images are loaded, the specific dimensions needed (eg 500px) will be created automatically