What strategies can I implement to minimize jank and minimize layout shifts when using responsive images?

Question

What strategies can I implement to minimize jank and minimize layout shifts when using responsive images?

On my website, I have a variety of images in different sizes that adjust responsively to the browser width. However, Google Search Console indicates that there is a significant CLS issue with a shift time of .25s due to the layout moving as the images load.

Given that the images are responsive, it's challenging to set specific dimensions or placeholders to reserve space for them.

Is there a modern approach to addressing CLS concerns with responsive images?

Check out the layout here: https://jsfiddle.net/exspwgab/

Update: To tackle this problem, I attempted a technique found online which involves specifying the image file's width and height within the img tag like this:

<img src="photo.jpg" width="1504" height="752">

Additionally, I applied the following CSS properties:

width: 100%;
height: auto;

However, this method didn't provide the desired results and the webpage elements continued to shuffle during image loading.

If anyone knows of a solution that works across all browsers, please share it with me. I require placeholders to maintain space integrity while images load, in order to avoid any jarring effects on the page.

For reference, here is a JSFiddle showcasing my responsive layout: https://jsfiddle.net/exspwgab/

html css image responsive-design

Answer 1

Answer №1

While I can't claim that this is the ultimate solution to the CLS dilemma, I am simply offering some helpful insight.

It's clear that using constant-sized placeholders for responsive image elements is not a feasible option. But what if we opt for fixed-size placeholders/elements for responsive content instead?

Consider the following example:

img.placeholder-image {
    width: 100%;
    height: 256px;
    object-fit: contain; 
}

By setting a fixed height, this element can maintain a positive impact on the CLS policy by containing the entire image content within itself even during viewport resizing.

I recommend considering the use of <div> elements instead of <img> tags to display image contents (utilizing the background property), although I cannot guarantee that it doesn't violate any audit regulations.

Just my two cents.

Answer 2

While I can't claim that this is the ultimate solution to the CLS dilemma, I am simply offering some helpful insight.

It's clear that using constant-sized placeholders for responsive image elements is not a feasible option. But what if we opt for fixed-size placeholders/elements for responsive content instead?

Consider the following example:

img.placeholder-image {
    width: 100%;
    height: 256px;
    object-fit: contain; 
}

By setting a fixed height, this element can maintain a positive impact on the CLS policy by containing the entire image content within itself even during viewport resizing.

I recommend considering the use of <div> elements instead of <img> tags to display image contents (utilizing the background property), although I cannot guarantee that it doesn't violate any audit regulations.

Just my two cents.

Answer 3

Answer №2

Having encountered the exact same issue myself, I found a solution that worked like a charm. Simply replace width: 100% with max-width: 100%.

This workaround is subtly mentioned on this website.

img {
 max-width: 100%; /* or width: 100%; */
 height: auto;
}

Answer 4

Having encountered the exact same issue myself, I found a solution that worked like a charm. Simply replace width: 100% with max-width: 100%.

This workaround is subtly mentioned on this website.

img {
 max-width: 100%; /* or width: 100%; */
 height: auto;
}

Answer 5

Answer №3

Website Code:

<img width="300" height="450" src="300x450.jpg">

CSS Styling:

    img {
        height: auto;
        aspect-ratio: 2/3;
        max-width: 100%;
    }

Compatible Browsers:

Chrome 88+
Edge 88+

Answer №4

Don't stress if you need to do what you're doing.

Tools designed to flag potential issues with your website don't always consider the full context. For instance, imagine a scenario where my website features a large 20 MB image that takes a few seconds to load. Google's analysis tools might highlight this as a problem, but perhaps in this case, the image is essential for hosting scientific imagery that necessitates a high-quality, sizable file. In such instances, users would be patient and willing to wait for the necessary data to load.

If your website layout demands loading images that are subsequently resized dynamically, then this is simply a part of the requirements that should not cause undue concern.

Answer 8

Don't stress if you need to do what you're doing.

Tools designed to flag potential issues with your website don't always consider the full context. For instance, imagine a scenario where my website features a large 20 MB image that takes a few seconds to load. Google's analysis tools might highlight this as a problem, but perhaps in this case, the image is essential for hosting scientific imagery that necessitates a high-quality, sizable file. In such instances, users would be patient and willing to wait for the necessary data to load.

If your website layout demands loading images that are subsequently resized dynamically, then this is simply a part of the requirements that should not cause undue concern.

Answer 9

Answer №5

After exploring various options, I came across a helpful solution on this page: http://davidecalignano.it/lazy-loading-with-responsive-images-and-unknown-height/#:~:text=And%20here%20is%20the%20formula,flashes%20on%20lazy%20loaded%20images.

Here is the HTML code snippet:

<a class="thumb lazy-container" href="#">
 <img class="lazy" data-original="image.jpg" alt="">
</a>

And here is the corresponding CSS:

.lazy-container {
 display: block;
 position: relative;
 height: 0;
}

.post .lazy-container {
 padding-bottom: 55.3%;
}

.lazy-container img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Since my images varied in height, I opted to set the padding-bottom percentage as an inline style for each individual image.

Answer 10

After exploring various options, I came across a helpful solution on this page: http://davidecalignano.it/lazy-loading-with-responsive-images-and-unknown-height/#:~:text=And%20here%20is%20the%20formula,flashes%20on%20lazy%20loaded%20images.

Here is the HTML code snippet:

<a class="thumb lazy-container" href="#">
 <img class="lazy" data-original="image.jpg" alt="">
</a>

And here is the corresponding CSS:

.lazy-container {
 display: block;
 position: relative;
 height: 0;
}

.post .lazy-container {
 padding-bottom: 55.3%;
}

.lazy-container img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Since my images varied in height, I opted to set the padding-bottom percentage as an inline style for each individual image.

What strategies can I implement to minimize jank and minimize layout shifts when using responsive images?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Change the border color of radio buttons when clicked

Tips on extracting the value from the chosen option in 2 separate rows with identical IDs

How can custom CSS and JS be loaded in Sencha Touch based on the user's device - PC, tablet, or smartphone?

Exploring the HTML5 File API: Features and Capabilities

Selenium IDE - Verify the color in a test step

Different ways to style this form using only CSS

What is the method to choose an option from a dropdown menu that is devoid of the "select" tag using Selenium in Python?

Arrangement with mutual prime numbers and rowspan

What is causing the extra space in Flexbox layout?

The JQuery condition is failing to accurately recognize the span checkbox

How can you use JavaScript/jQuery to scroll to the top of a DIV?

Tips for accessing distinct ng-model values within ng-include within a single HTML document

What is the best way to add animation to a button within a form using CSS?

Using jQuery to adjust the scrollLeft property of a div upon clicking a label

Can you explain the attributes "lsdata" and "lsevents" to me?

Adjust the width of the container and rotate the text accordingly

Adjust the width of the div according to the space available from its neighboring div

eliminate element from array and refresh table

The username index is not defined in the file path C:xampphtdocsAppX1signin.php on line 6

mobile devices experiencing scroll due to absolutely positioned elements