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.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.