The correct aspect ratio will improve your Lighthouse scores. Layout shifts can happen for many reasons, dive into how images can have a negative effect.

BuilderIO's blog offers web developers practical resources for creating efficient digital experiences. It covers frontend tips, performance optimization, and framework comparisons through tutorials. Helping devs build faster websites and apps.

builder.io

Improving Lighthouse scores can be achieved by setting the correct aspect ratio on images. Cumulative Layout Shift (CLS) is a metric that measures layout adjustments. Two recommended approaches to solving image CLS issues are using the aspect-ratio CSS property and setting width and height attributes on the img tag.

How To Improve Lighthouse Scores by Avoiding <img> Layout Shifts

You can even automatically calculate the aspect ratio from width and height (here in typescript, but it should work similarly in any language):
<pre><code class="language-ts">const getLargestCommonDivisor = (a: number, b: number): number =&gt; 

 a === 0
 ? Math.abs(b)
 : b === 0
 ? Math.abs(a)
 : getLargestCommonDivisor(b, a % b);

const getAspectRatio = (width: number, height: number): string =&gt; {
 const largestCommonDivisor = getLargestCommonDivisor(width, height);
 return `${width / largestCommonDivisor}/${height / largestCommonDivisor}`;
}
</code></pre>

Lazy loading of images also helps a lot.

Finalyy we can start to use aspact-ratio