Reducing cumulative layout shift for responsive images - core web vitals

[seoelevated]

In preparation for Core Web Vitals becoming a ranking factor in May 2021, we are making efforts to reduce our Cumulative Layout Shift (CLS) on pages where the shift is being caused by images loading. The general recommendation is to specify both height and width attributes in the html, in addition to the CSS formatting which is applied when the images load. However, this is problematic in situations where responsive images are being used with different aspect ratios for mobile vs desktop. And where a CMS is being used to manage the pages with images, where width and height may change each time new images are used, as well as aspect ratios for the mobile and desktop versions of those.

So, I'm posting this inquiry here to see what kinds of approaches others are taking to reduce CLS in these situations (where responsive images are used, with differing aspect ratios for desktop and mobile, and where a CMS allows the business users to utilize any dimension of images they desire).

[Guest]

This post is deleted!

[Staunton_Rook]

yes please, would love to know also, getting this error through aa gtmetrix and PSI reports

[Arun.Das]

I'm in the same exact situation as well!  Feels like we are kind of stuck as I also have different aspect ratios for device and use a CMS  that has a lot of limitations.