#aspect ratio

1 messages · Page 1 of 1 (latest)

high tulipBOT
#

Hi @lucid elm. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The Lighthouse warning about "Displays images with incorrect aspect ratio" occurs when the displayed dimensions of your image (as set by CSS) do not match the image's natural aspect ratio. This causes the browser to stretch or squash the image, which can negatively impact visual quality and performance scores.

In your case:

  • Displayed aspect ratio: 506 x 664 (≈0.76)
  • Natural aspect ratio: 580 x 819 (≈0.71)

How to Fix

1. Match CSS Dimensions to the Image's Natural Aspect Ratio

The most direct solution is to ensure that the width and height you set in your CSS for .cs-picture match the natural aspect ratio of your image.

Calculate the correct aspect ratio:

  • Natural aspect ratio = 580 / 819 ≈ 0.708

If you want the width to be 32.625em, calculate the height:

  • height = width / aspect ratio = 32.625em / 0.708 ≈ 46.07em

So, update your CSS for .cs-picture:

#sbs-1883 .cs-picture {
  width: 32.625em;
  height: 46.07em; /* Adjusted to match the image's aspect ratio */
  /* ...other styles... */
}

Or, if you want to keep the height fixed, adjust the width accordingly.

2. Use the <Image /> Component's Aspect Ratio

Astro's <Image /> component automatically infers the aspect ratio from the imported image and sets the correct width and height attributes to avoid Cumulative Layout Shift (CLS). However, if you override these with CSS that does not match the image's aspect ratio, you can still get this warning. The knowledge sources confirm that <Image /> infers and sets the correct aspect ratio, but you must ensure your CSS does not distort it Display optimized images with the <Image /> component.

3. Use object-fit: cover Carefully

#

While object-fit: cover helps fill the container, it can crop the image if the aspect ratios do not match. This is fine for decorative images, but for best Lighthouse scores, the container's aspect ratio should still match the image's.

4. Responsive Images

If you are using Astro's experimental responsive images, ensure your layout and container sizing are consistent with the image's aspect ratio Experimental responsive images.

Summary:
Update your CSS so that the .cs-picture container's width and height match the natural aspect ratio of your image. This will resolve the Lighthouse warning and ensure your image displays correctly without distortion.

If you need to maintain a specific size for design reasons, consider cropping or resizing your source image to match the desired aspect ratio.

Let me know if you need help calculating the exact CSS values!

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: