Oversized Images Causing Slow Speed in our websites how to use Renditions? | Community
Skip to main content
S
SupportMember
Level 6
October 21, 2021
Solved

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

  • October 21, 2021
  • 3 replies
  • 1509 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by joerghoh

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.

3 replies

SantoshSai
Community Advisor
SantoshSaiCommunity Advisor
Community Advisor
October 21, 2021

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/

Santosh Sai
    Ankur_Khare
    Community Advisor
    Ankur_KhareCommunity Advisor
    Community Advisor
    October 22, 2021

    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.

     

      joerghoh
      Adobe Employee
      joerghohAdobe EmployeeAccepted solution
      Adobe Employee
      October 23, 2021

      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.

        Terms & ConditionsAccessibility statement

        Loading footer...