Oversized Images Causing Slow Speed in our websites how to use Renditions?

[SupportMember]

Hi all, 

We currently have a problem where our authors are using big images on our AEM websites, making the pages very slow. I understand that each image from the dam has renditions, but we use them in a way where it can help us speed up our websites.

I am sure that our authors will not have the luxury of choosing a rendition, generated from AEM. How have you guys resolve LARGE images being used on AEM websites. Please share? We are also using pageSpeed tools to optimize images, but still, the authors are uploading whatever they want. 

Any suggestions? how to use Renditions?

[SantoshSai]

Hi @SupportMember 

CSS responsive design- you can get it done.

1. If you want to render only image then create different classes for different screens and add those classes in HTL.

2. If you want to render content and images based on different screen sizes you can also create templates and reuse them in your HTL. 

based on your requirements anyone from above should work.

Regards,

Santosh

https://www.techinnovia.com/blog/

[Ankur_Khare]

Hi,

Use these properties in dialog for path browser-

sling:resourceType="/libs/granite/ui/components/coral/foundation/form/pathfield"
filter="nosystem"

And then author can select the renditions but make sure u add relevant rules on dispatcher nor renditions wont be accessible.

[Jörg_Hoh · Accepted solution]

Typically your frontend design requires images in a 3-5 dimensions. Make sure that for all assets renditions are created in these dimensions.

Then you need to design your components in a way, that they know in every situation what specific dimension should be used, and based on that it should be easy to choose the correct rendition of that asset.

In that case your authoring users do not need to care about renditions and dimensions at all.