Expand my Community achievements bar.

Load images based on target height and width

Avatar

Level 2

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):  
5 Comments

Avatar

Administrator

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.
Status changed to: Investigating

Avatar

Employee

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.

Avatar

Level 2

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.

Avatar

Level 1

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

Avatar

Level 2

1/11/24

martinkastler_0-1704991503802.png

 

 

alext79299363
Level 1

Likes

 
0 Likes

Gesamtzahl der Beiträge

 
12 Posts

Korrekte Antwort

 
0 Lösungen
Profil anzeigen

@alext79299363 

We do have a Dynamic Media subscription, but we are thinking of cancelling it as it is useless to us for the most part.

 

I know how to set DM profiles and renditions. Still, the Web-Optimized Image Delivery delivers images at 1600px width.