Best practices for image handling/sizing for hero designs | Community
Skip to main content
Tracible
Tracible
October 26, 2022
Solved

Best practices for image handling/sizing for hero designs

  • October 26, 2022
  • 1 reply
  • 1836 views

I am a product designer and have been tasked in finding the best practices for standard image sizes for heros on multiple breakpoints. Please if someone can help break this down to me or point me in the right direction I would appreciate the help. 

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 SantoshSai

Hi @tracible,

Responsive Layout

AEM allows you to have a responsive layout for your pages by using the Layout Container component.

This provides a paragraph system that allows you to position components within a responsive grid. This grid can rearrange the layout according to the device/window size and format.

Please have a look at [0] & [1]. Also, worth checking Understanding Responsive Layout [2]

[0]: https://experienceleague.adobe.com/docs/experience-manager-64/assets/dynamic/best-practices-for-optimizing-the-quality-of-your-images.html?lang=en#best-practices-for-image-size

[1]: https://experienceleague.adobe.com/docs/dynamic-media-classic/using/image-sizing/quick-start-image-sizing.html?lang=en

[2]: https://experienceleague.adobe.com/docs/experience-manager-learn/sites/page-authoring/responsive-layout-feature-video-understand.html?lang=en

Hope that helps!

Regards,

Santosh

1 reply

SantoshSai
Community Advisor
SantoshSaiCommunity AdvisorAccepted solution
Community Advisor
October 26, 2022

Hi @tracible,

Responsive Layout

AEM allows you to have a responsive layout for your pages by using the Layout Container component.

This provides a paragraph system that allows you to position components within a responsive grid. This grid can rearrange the layout according to the device/window size and format.

Please have a look at [0] & [1]. Also, worth checking Understanding Responsive Layout [2]

[0]: https://experienceleague.adobe.com/docs/experience-manager-64/assets/dynamic/best-practices-for-optimizing-the-quality-of-your-images.html?lang=en#best-practices-for-image-size

[1]: https://experienceleague.adobe.com/docs/dynamic-media-classic/using/image-sizing/quick-start-image-sizing.html?lang=en

[2]: https://experienceleague.adobe.com/docs/experience-manager-learn/sites/page-authoring/responsive-layout-feature-video-understand.html?lang=en

Hope that helps!

Regards,

Santosh

Santosh Sai
    Terms & ConditionsAccessibility statement

    Loading footer...