How AdaptiveImageServlet / Dynamic Media know which device is it? | Adobe Higher Education
Skip to main content
A
AniketSi
Level 2
December 6, 2023
Beantwortet

How AdaptiveImageServlet / Dynamic Media know which device is it?

  • December 6, 2023
  • 2 Antworten
  • 814 Ansichten

How does the AdaptiveImageServlet / Dynamic Media know user's device and screen size?

How does they know resolve which Rendition to be serve?

Dieses Thema wurde für Antworten geschlossen.
Beste Antwort von aanchal-sikka

@aniketsi 

 

For Adaptive Image, please refer to https://techrevel.blog/2023/09/25/adaptive-image-rendering-via-delegation-for-aem-components/

 

1. A template author would configure accepted widths via policy of Image component

2. These Widths are used by Image component to generate SRC SET

3. The browser then evaluates the best match for current Device from that srcset

4. The selected rendition request is then made to AdaptiveImageServlet, which generates/returns the matching rendition.

 

The blog details the steps 2 & 3.

 

To learn more about Step-4, refer to https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/adaptive-image-servlet.html?lang=en#rendition-selection 

 
 

 

2 Antworten

aanchal-sikka
Community Advisor
aanchal-sikkaCommunity AdvisorAntwort
Community Advisor
December 6, 2023

@aniketsi 

 

For Adaptive Image, please refer to https://techrevel.blog/2023/09/25/adaptive-image-rendering-via-delegation-for-aem-components/

 

1. A template author would configure accepted widths via policy of Image component

2. These Widths are used by Image component to generate SRC SET

3. The browser then evaluates the best match for current Device from that srcset

4. The selected rendition request is then made to AdaptiveImageServlet, which generates/returns the matching rendition.

 

The blog details the steps 2 & 3.

 

To learn more about Step-4, refer to https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/adaptive-image-servlet.html?lang=en#rendition-selection 

 
 

 

Aanchal Sikka
    BrianKasingli
    Community Advisor and Adobe Champion
    BrianKasingliCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    December 6, 2023

     

    The srcset attribute in AEM Core Component's Image component ensures optimal image delivery for responsive web design. It dynamically selects the most appropriate image source based on the user's device, adapting to different screen sizes and resolutions. This leads to faster page loads, reduced bandwidth usage, and an enhanced user experience. Here's a concise example:

     

    <img
    src="default.jpg"
    srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1200w"
    sizes="(max-width: 320px) 280px, (max-width: 768px) 680px, 1200px"
    alt="Responsive Image Example">

    In this example, the srcset attribute provides multiple image sources with different widths, and the sizes attribute specifies the width of the image based on viewport dimensions. Browsers use this information to intelligently load the most suitable image, optimizing performance for diverse devices


     

      A
      AniketSiAutor
      Level 2
      December 11, 2023

      Thanks for sharing the info @briankasingli 

        Allgemeine NutzungsbedingungenAccessibility statement

        Loading footer...