Image Aspect Ratio

Why It Matters

• It prevents layout shifts. When the browser does not know an image's dimensions, it initially renders the page as if the image does not exist. Once the image loads, everything below it gets pushed down — sometimes mid-read. This is frustrating for users and hurts your Cumulative Layout Shift score.
• Users hate content that jumps. There are few things more annoying than trying to click a link or read a paragraph, only to have the content suddenly move because an image just loaded above it. Declared dimensions eliminate this entirely.
• It keeps responsive images looking right. When images scale to fit different screen sizes, the aspect ratio ensures they shrink or grow proportionally. Without it, images can appear stretched, squished, or cropped in unexpected ways.
• It helps the browser paint the page faster. When the browser knows how much space to reserve, it can lay out the rest of the content without waiting for the image to download. This makes the rendering process smoother and more predictable.

How to Set It Up

1. Always include width and height attributes. Add explicit width and height attributes to every <img> tag. Modern browsers use these to calculate the aspect ratio before the image loads, reserving the correct space automatically.
2. Use CSS aspect-ratio for flexible layouts. The CSS aspect-ratio property lets you declare the ratio directly in your stylesheet. This works well for responsive designs where images need to fill a percentage of their container width.
3. Match the declared ratio to the actual image. If your image is 1200×800 pixels, set width="1200" height="800" (or any proportionally equivalent values like 600 and 400). A mismatch between declared and actual dimensions will stretch or distort the image.
4. Handle responsive images properly. When using max-width: 100% with height: auto, the browser still uses the width and height attributes to calculate the correct aspect ratio. You get responsive sizing with proper space reservation.
5. Apply the same logic to video and iframes. Embedded videos and iframes also cause layout shifts if their dimensions are not declared. Use the same approach — declare width and height or use aspect-ratio in CSS.

Common Mistakes

• Omitting width and height entirely. Many developers leave out image dimensions, especially in CMS-generated content. The browser then has no idea how much space to reserve, guaranteeing layout shifts on every page load.
• Setting dimensions that do not match the image. Declaring width="800" height="800" for a 16:9 image will distort it — or cause a layout shift when the browser corrects itself. Always use dimensions that reflect the actual proportions.
• Using CSS to override natural dimensions incorrectly. Setting a fixed CSS height on a responsive image without considering the aspect ratio can squish or stretch it. Use height: auto together with a max-width to maintain proportions.
• Forgetting about lazy-loaded images. Images that load as the user scrolls down (lazy loading) are especially likely to cause layout shifts if their dimensions are not declared. The same rules apply — always declare the aspect ratio.