Images display with incorrect aspect ratio

If a rendered image has a significantly different aspect ratio from the aspect ratio in its source file (the "natural" aspect ratio), then the rendered image may look distorted, possibly creating an unpleasant user experience. Lighthouse flags images with incorrect aspect ratios.

How this audit fails

Lighthouse flags any image that has a rendered aspect ratio which is 5 percent or more different than its natural ratio. Two commom causes for this are:

  • Images are are set to explicit width and height values that differ from the source image's dimensions.
  • Images are set to a width and height as a percentage of a variably-sized container.

Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

Ensure images display with correct aspect ratio

When possible, it's a good practice to specify image width and height in HTML, so that the browser can allocate space for the image. In practice, this approach can be difficult if you're working with responsive images, because there's no way to specify width and height until you know the viewport dimensions.

Consider using css-aspect-ratio or Aspect Ratio Boxes to help preserve aspect ratios. Chrome DevTools can show you the CSS declarations that affect an image's aspect ratio. See View only the CSS that's actually applied to an element.

Learn more in Serve images with correct dimensions.

More information

Codelabs

See it in action
Learn more and put this guide into action.
Last updated: Improve article