<aside> ❓ Cumulative Layout Shift (CLS) is one of the Core Web Vitals metrics. It is an important user-centric measure to evaluate visual stability because it quantifies the frequency of unexpected layout changes, specifically content jumps on the page. A low CLS ensures that the page is pleasant to use.

</aside>

To avoid a high CLS score, it is important to "reserve" the space that images will occupy on your pages.

We recommend using the 'padding' trick which is well-known for sizing image containers and correcting this issue.

Here is an article that explains this technique in detail:

Aspect Ratio Boxes | CSS-Tricks

<aside> 💡 Tip: In case your master images dont have the same original aspect ratio, you might need to apply the CSS property object-fit: contain instead of object-fit: cover to your images.

</aside>

Another technique you can implement if you don't want to set in advance the aspect-ratio of display is to load a preview of the image using the output transformation.

The “output=preview” transformation allows you to load immediately a very lightweight SVG file of the HD image that has the same aspect-ratio as the original image. By setting the preview image as a background-image on the image container and by sizing its width, it will set perfectly the image container for the HD image.

CodePen example :

Responsive Flexbox Grid (with TwicPics LQIP)

Expected result:

Before loading :

After loading :