Resizing proportionally means scaling both dimensions by the same factor. Given an original size and one new dimension, the other follows: new height is new width times original height divided by original width.
A 1920×1080 image constrained to 800px wide becomes 450px tall, because the ratio 1.7778 has to hold. That ratio simplifies to 16:9, which is the value to put in the CSS aspect-ratio property.
Declaring aspect-ratio in CSS, or width and height attributes on the img element, lets the browser reserve the right space before the image loads. That removes the layout shift that otherwise happens when it arrives, which is a measured ranking factor as well as an irritation.
The formula
w₁, h₁- Original width and height
w₂- The new width you want
h₂- The height that preserves the ratio
ratio- w₁ ÷ h₁, simplified to whole numbers
How it works, step by step
- Enter the original width and height.
- Enter the new width you need.
- The gauge shows the matching height.
- Use the simplified ratio in your CSS aspect-ratio declaration.
Worked examples
Fitting a 16:9 image to an 800px column
1920×1080 scaled to 800px wide gives 450px tall. The scale factor is 41.7 per cent, and the pixel count drops from 2.07 megapixels to 0.36 — about 83 per cent less data to encode.
A portrait crop
A 1200×1600 portrait at 400px wide becomes 533px tall. The ratio is 3:4, so declaring aspect-ratio: 3 / 4 reserves the correct box before the file arrives.
How to read your score
Frequently asked questions
Why does aspect ratio matter for page speed?
Because without it the browser cannot reserve space for an image it has not downloaded, so the content below jumps when it loads. That shift is measured by Cumulative Layout Shift, which is part of Core Web Vitals.
Should I use CSS aspect-ratio or width and height attributes?
Both. The HTML attributes give the browser a ratio before any CSS is parsed, and the CSS property handles cases where the rendered size differs from the intrinsic one.
What are the common ratios?
16:9 for video, 4:3 for older photography and slides, 3:2 for most cameras, 1:1 for social avatars and 21:9 for cinematic crops. Any of them can be expressed as a decimal if the numbers are awkward.
Does resizing change the ratio at all?
It should not, but rounding to whole pixels can shift it by a fraction. On a small thumbnail that rounding is occasionally visible as a one pixel band, which object-fit: cover resolves.
Proportional heights for common ratios
| Ratio | Decimal | 400px wide | 800px wide | 1200px wide |
|---|---|---|---|---|
| 1:1 | 1.0000 | 400px | 800px | 1200px |
| 4:3 | 1.3333 | 300px | 600px | 900px |
| 3:2 | 1.5000 | 267px | 533px | 800px |
| 16:10 | 1.6000 | 250px | 500px | 750px |
| 16:9 | 1.7778 | 225px | 450px | 675px |
| 21:9 | 2.3333 | 171px | 343px | 514px |
| 3:4 | 0.7500 | 533px | 1067px | 1600px |
Heights rounded to the nearest pixel, which is what a browser does when laying out.