Ratios, fits and crops

Ratios, fits and crops

Reduced to its simplest form, with the dimensions that fit inside a box and the crop that fills one — and what each of those loses.

Reserving the space is the point

The most valuable thing an aspect ratio does is not describing a shape — it is holding the space before the content arrives. A picture with no declared dimensions occupies nothing until it has downloaded, then suddenly occupies its full height and shoves everything below it down the page. The reader loses their place, and anyone mid-tap hits the wrong thing.

Giving the element a ratio, or the plain width and height attributes an image has always accepted, lets the browser compute the height from the width it already knows and lay the page out correctly on the first pass. Nothing moves when the file lands. This is measurable — it is most of what Cumulative Layout Shift is measuring on a content-heavy page — and it is close to free.

Where the familiar ratios come from

4:3 is the shape of early film and of television until the 2000s, which is why old footage and a great many camera sensors still carry it. 16:9 replaced it as the broadcast and display standard and is what almost every screen you will design for is shaped like. 3:2 is the 35mm still-photography frame and what most interchangeable-lens cameras produce, which is why photographs so often need cropping to sit in a 16:9 hero. 1:1 owes its ubiquity to social platforms rather than to any optical history, and 21:9 is the approximate shape of anamorphic cinema.

The practical consequence is that a photograph and the box you want to put it in rarely agree, and something has to give — either letterboxing, which keeps the whole frame and adds empty space, or cropping, which fills the box and throws part of the picture away. Deciding which of those you can afford is the actual design decision; the arithmetic is the easy half.