Code
Displays images with correct aspect ratio
If a rendered image has an aspect ratio that's significantly different from the aspect ratio in its source file (the natural aspect ratio), the rendered image may look distorted, possibly creating an unpleasant user experience.
How the audit fails
Sitefig uses Lighthouse which flags any image with a rendered dimension more than a few pixels different from the expected dimension when rendered at its natural ratio:
There are two common causes for an incorrect image aspect ratio:
- An image is set to explicit width and height values that differ from the source image's dimensions.
- An image is set to a width and height as a percentage of a variably-sized container.
Fixing the problem
Use an image CDN
An image CDN can make it easier to automate the process of creating different sized versions of your images. Check out How to install the Thumbor image CDN.
Check the CSS that affects the image's aspect ratio
If you're having trouble finding the CSS that's causing the incorrect aspect ratio, Chrome DevTools can show you the CSS declarations that affect a given image. See Google's View only the CSS that's actually applied to an element page for more information.
Check the image's width and height attributes in the HTML
When possible, it's good practice to specify each image's width and height
attributes in your HTML so that the browser can allocate space for the image. This approach helps to
ensure that content below the image doesn't shift once the image is loaded.
However, specifying image dimensions in HTML can be difficult if you're working with responsive images because there's no way to know the width and height until you know the viewport dimensions. Consider using the CSS Aspect Ratio library or aspect ratio boxes to help preserve aspect ratios for responsive images.