Placeholder for Image in AEM

[apurba-bs23]

Hi,

I want to implement a place holder for image loading as following criteria.
1. The place holder must be the same size of image that will be loaded later and can vary in different screen sizes.
2. The purpose of the place holder is to prevent Layout Shifting. So when page loads this place holder should visible as well.

Can anyone help me on this ?

[tusharbias]

Whenever you load large image on the page and it's taken too much time, that time you can show loading image or you can say Placeholder image ( Html Image Placeholder ) within the same image tag.

You can do this simply by using CSS. Use background property of css and set url of an loading image. According to me you should write no-repeat with it because if you not add this line then your image will repeat more than one times.

Html Image Placeholder : For large size image loading on the html page you can show loading image or you can say Placeholder image within the same image tag.

Example -

.image_placeholder{
  background: url('placeholder.gif') no-repeat;
  background-position: center;
  width:200px;
  height:200px;
}

Now, you can use this css class into your img tag to show placeholder image until original image loading into img tag.

Another workaround could be but a costlier one - if you have DM or similar which can generate any number of renditions of placeholder image then you can simply give height/width of a placeholder rest DM will take care of it. And when you will have actual images available then replace the placeholders. (this will only help if you already have a DM license)

I understand your concern about maintaining the page layout consistency when the actual image loads. To achieve this, you can set the height and width of the <img> tag using CSS. By doing so, you ensure that the image's dimensions are reserved in the layout even before the actual image is loaded. This approach prevents any layout shift and guarantees a smoother user experience.

Moreover, implementing this solution is both simple and cost-effective, as it involves making adjustments within the existing CSS code without the need for additional tools or services. It's a practical and efficient way to handle image rendering and enhance the overall user experience on the website.

[kaikubad · Accepted solution]

We had a 100% similar issue with our site where there was too many layout shifting. We solved it using js and backend logic. We used the plugin https://afarkas.github.io/lazysizes/index.html . Its easy to integrate and written in vanilla js.

as it needs a source set we have also created source set for it. Aem core image component already have support for lazy loading

The markup will look like this

<div class="cmp-teaser__teaser-image">
    <div id="image-f8e63405b9" class="cmp-image">
        <img data-sizes="auto" data-expand="50"
            src="https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:320&amp;quality=10"
            data-srcset="https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:480&amp;quality=80 480w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:768&amp;quality=80 768w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:1024&amp;quality=80 1024w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:1280&amp;quality=80 1280w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:1400&amp;quality=80 1400w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:1600&amp;quality=80 1600w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:1920&amp;quality=80 1920w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:2560&amp;quality=80 2560w"
            class="cmp-image__image blur-up  w-full max-w-full lazyautosizes lazyloaded" itemprop="contentUrl"
            data-cmp-hook-image="image" alt="Woman female engineer working checking inspecting product"
            title="Woman engineer working" sizes="599px"
            srcset="https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:480&amp;quality=80 480w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:768&amp;quality=80 768w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:1024&amp;quality=80 1024w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:1280&amp;quality=80 1280w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:1400&amp;quality=80 1400w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:1600&amp;quality=80 1600w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:1920&amp;quality=80 1920w,https://example.com/transform/4654987-96938-8547-44/Woman-engineer-working?io=transform:fill,width:2560&amp;quality=80 2560w">
        <meta itemprop="caption" content="Woman engineer working">
    </div>
</div>

[Anudeep_Garnepudi]

@apurba-bs23 

This is pretty generic use case, nothing specific to AEM.

Have a wrapper for your image tag and fix width (height also if required) of the wrapper same as image width in all breakpoints. The image wrapper div will reserve the space for image and you will not see bouncing effect or Layout Shift.