Aspect ratio and Cumulative Layout Shift
When a browser meets an image without knowing its dimensions, it renders the page as though the image takes no space — then reflows everything the moment it arrives. That jump is Cumulative Layout Shift, one of Google's Core Web Vitals, and it's the reason you sometimes tap the wrong thing on a page that's still loading.
The fix costs nothing. Give every <img> its width and height attributes and modern browsers compute the ratio and reserve the space before the file downloads. Those attributes don't lock the display size — CSS still controls that — they simply tell the browser the shape in advance. A good CLS score is 0.1 or below; anything over 0.25 is rated poor.
Ratios worth recognising
16:9 is the video standard — YouTube, most screens, and most hero videos. 4:3 is classic photography and older displays. 1:1 squares suit avatars and product grids where uniformity matters more than composition. 9:16 is vertical video for stories and shorts. 1.91:1 — practically 1200 × 630 — is the Open Graph share image ratio, which is why our meta tag generator recommends exactly those dimensions.
Two ratios show up in design more than in specs: 3:2, the native ratio of most DSLR sensors, and 21:9 ultrawide, used for cinematic banners.
Scaling without distortion
The rule is simple and constantly broken: scale both dimensions by the same factor. If you halve the width, halve the height. Setting one dimension and eyeballing the other is what produces the subtly stretched images that make a site look amateur.
In CSS, object-fit handles the cases where a ratio mismatch is unavoidable. object-fit: cover fills the container and crops the overflow — right for thumbnails and hero images where composition matters less than filling the space. object-fit: contain fits the whole image inside, leaving empty space — right for logos and product shots that must not be cropped.
The modern CSS aspect-ratio property
For responsive containers whose dimensions aren't known in advance, aspect-ratio: 16 / 9 keeps a fluid element's shape at any width. It replaced the old padding-top percentage hack, which worked but was completely opaque to anyone reading the stylesheet later.
Use both approaches together: width and height attributes on the image element so the browser reserves space during load, and aspect-ratio in CSS for embeds, video wrappers and any container that must hold its shape as the layout flexes.