Overview
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.
Recommendations
- Avoiding setting the width or height of an element as a percentage of a variably-sized
container.
- Avoid setting explicit width or height values that differ from the source image's dimensions.
- Consider using css-aspect-ratio or
Aspect Ratio Boxes to help preserve aspect
ratios.
- 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, which prevents it from jumping around as the page
loads. It's more optimal to specify width and height in HTML rather than CSS, because the
browser allocates space before parsing the CSS. 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.
Inspecting rendered images with incorrect 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.
More information
Lighthouse flags any image that has a rendered aspect ratio which is 5 percent or more different
than its natural ratio.
Audit source
Feedback
Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.