Image Aspect Ratio Test
What is it?
An image aspect ratio check evaluates whether each image on your page is displayed at a ratio meaningfully different from the source file's native ratio. When the rendered ratio diverges from the source ratio, the browser stretches or squashes the image to fit, producing a visibly distorted result that hurts perceived quality and undermines the credibility of the page. Catching these mismatches early is a quick way to keep visuals looking sharp and intentional across desktop and mobile layouts.
Why correct aspect ratios matter
Aspect ratio mismatches are usually unintentional and often subtle: a hero image declared at 800 by 400 in the markup but actually 1600 by 1000 will render slightly squashed in ways the human eye reads as "off" without quite knowing why. Beyond appearance, mismatched aspect ratios are a common cause of cumulative layout shift (CLS), because the browser cannot reserve the correct slot before the image loads. Fixing aspect ratios therefore improves both visual quality and Core Web Vitals at the same time.
The modern best practice is to declare both width and height attributes that match the source file's dimensions, then let CSS scale the image responsively with height: auto. The aspect-ratio CSS property is also widely supported and useful for containers that need to preserve a specific ratio regardless of content.
Common mistakes worth checking
- Hard-coded width and height that do not match the source file's true dimensions.
- Container with a fixed height cropping the image, where
object-fitwould handle the situation cleanly. - Wrong source file uploaded, where the right answer is to swap the asset rather than stretch it in CSS.
- Responsive layouts with mismatched aspect ratios across breakpoints, producing different distortions at different viewports.
This test reports which images render at distorted ratios and what their source ratios actually are, so you can either correct the dimensions or replace the file with a properly proportioned crop. The fix guide below covers the relevant HTML and CSS techniques, including how to use object-fit when intentional cropping is the right answer.
Pass rate:
-
Top 100 websites: 75%This value indicates the percent of top 100 most visited websites in the US that pass this test (in the past 12 months).
-
All websites: 60%This value indicates the percent of all websites analyzed in SEO Site Checkup (500,000+) in the past 12 months.
| 2021 | 72% |
|---|---|
| 2022 | 68% |
| 2023 | 75% |
| 2024 | 75% |
100
75
50
25
0
How do I fix it?
This test fails when one or more images are rendered at an aspect ratio meaningfully different from the source file's native ratio, producing stretched or squashed visuals. Fixing this issue means either using width and height attributes that match the file's real dimensions or replacing the source with a correctly proportioned crop.
Example
<!-- Source file is 1600 x 900 (16:9). Set matching attributes: -->
<img src="/images/marathon-1600.jpg"
alt="Marathon runners at sunrise"
width="1600" height="900"
style="max-width: 100%; height: auto;">Where to make the change
- Raw HTML and CSS: set the
widthandheightattributes to the source file's native dimensions. Use CSSheight: autowhen scaling responsively so the browser preserves the ratio. - WordPress: when inserting an image via the block editor, choose the image's intended size rather than overriding dimensions in custom CSS.
- Shopify, Wix, or Squarespace: use the platform's built-in image cropper so the displayed crop matches the source file you upload.
- Headless or framework sites: components like
next/imagerequire bothwidthandheight, which prevents distortion when the layout scales.
Common causes and how to resolve them
- Hard-coded width and height that do not match the file: recompute them from the source dimensions or remove them and rely on the file's intrinsic ratio.
- Container has a fixed height that crops the image: use CSS
object-fit: coverif cropping is intentional, or change the container so the image keeps its natural ratio. - Wrong source file uploaded: swap in a correctly proportioned crop rather than stretching the wrong file in CSS.
Best practices
- Always set both
widthandheight: the browser uses these to reserve space and avoid layout shift before the image loads, which helps CLS. - Use
object-fitwhen cropping is intentional:coverfills the container without distortion;containletterboxes to preserve the full image. - Standardize on a few aspect ratios: picking one or two ratios per template makes it easier to crop assets consistently and avoid one-off distortions.
