How to Display Images on a Web Page Without Cumulative Layout Shift (CLS)

Hello developers! In this blog post, we will learn how to display images on a web page without Cumulative Layout Shift (CLS) and adhere to our special requirements. This will help us improve our page experience and optimize for Search Engine Optimization (SEO) because significant layout shifts also affect SEO.

Here, we are going to learn how to display an image on a web page by following the points below:

• Reserving Space on the Page: I want to reserve space on the page until the image is loaded or an error occurs, with a grayish background. This creates a preview or hint, indicating that something will appear here.
• Image Display Requirements: I aim to show the image with a maximum width of 100%, a maximum height of 480px, maintaining the aspect ratio of the image, and horizontally center-aligned.
• Web Designing Aspects for SEO and Accessibility: Additionally, we'll adhere to other web designing aspects to improve SEO and accessibility.

See the video below for a demonstration of what exactly we are going to do:

What is Cumulative Layout Shift (CLS)?

Shifting the layout from one position to another is called a layout shift, and measuring this layout shift is referred to as CLS. In simpler terms, imagine reading a blog post and suddenly losing focus due to an image or anything else appearing in that place. You can observe how layout shifts happen in the video below.

See following Key term about CLS from web.dev and go to Cumulative Layout Shift (CLS) and Optimize Cumulative Layout Shift page to know more about CLS.

Key term: Cumulative Layout Shift (CLS) is a stable Core Web Vital metric. It is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.

The common causes of Layout Shift (CLS) include images, ads, embeds, and iframes without dimensions. However, here, we will focus on optimizing layout shifts for images.

To display images on a web page without any layout shift, always wrap the img tag in a div, figure, or picture tag. Displaying an image using only the img tag by following our points that mentioned in starting is next to impossible. 

After researching, I discovered that placing the img tag within a picture tag, which is inside a figure tag with a figcaption for image description, is considered a best practice. This approach is also beneficial for SEO and accessibility. Now, let's delve into the code.

The following HTML example demonstrates how to display an image with specified points, and it is the same HTML used for the first image in this blog post. 

<figure class="imgBox">
   <picture style="aspect-ratio: 5848 / 3899;">
      <img loading="lazy" width="5848" height="3899" src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?crop=entropy&amp;cs=srgb&amp;fm=jpg&amp;ixid=M3w1MDk0Nzl8MHwxfHNlYXJjaHw4fHxpbWFnZSUyMG9wdGltaXphdGlvbiUyMGluJTIwd2VifGVufDB8fHx8MTcwMTE1MzQwMHww&amp;ixlib=rb-4.0.3&amp;q=85&amp;w=1200">
   </picture>
   <figcaption>
      Photo by <a href="https://unsplash.com/@domenicoloia" rel="noopener ugc nofollow" target="_blank" style="color: inherit;">Domenico Loia</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral" rel="noopener ugc nofollow" target="_blank" style="color: inherit;">Unsplash</a>
   </figcaption>
</figure>

The following CSS use to style image as we want:

.imgBox {
    margin: 50px 0;
    cursor: default;
}

.imgBox picture {
    display: flex;
    margin: auto;
    max-width: 100%;
    max-height: 480px;
    background: #dcdcdc;
}

.imgBox img {
    width: 100%;
    height: 100%;
}

.imgBox figcaption {
    margin-top: 10px;
    text-align: center;
    color: #6b6b6b;
    font-size: 15px;
    font-family: math;
    letter-spacing: .2px;
}

Here I set aspect-ratio of image on picture in inline style because I add it in JavaScript, but you can use it in CSS. Here I not use source tag and it's sizes attribute but it is used to optimize image loading by using different image with different screen sizes. You can know more about image optimization by visiting MDN Responsive images page.

I hope you've learned how to display images without layout shifts and meet our requirements and find this blog post helpful and informative. Happy coding!