What aspect ratio should my image be?
An aspect ratio is width divided by height, and it survives any proportional resize. Changing it requires either cropping away content or distorting what remains, so the choice is which loss you prefer rather than whether to accept one.
Updated 2026-08-24
The ratio is what survives a resize
An aspect ratio is width divided by height, conventionally written as two whole numbers with a colon between them. It is a property of shape rather than size, which is the reason it is useful.
Scale an image by any factor and the ratio is unchanged: 1920 by 1080 and 1280 by 720 are both 16:9, because both divide to 1.778. This is why layouts can be specified in ratios and rendered at whatever pixel dimensions the device requires, and why a ratio is the right thing to agree on when a design and an implementation have to match.
Reducing a ratio to its simplest form uses the greatest common divisor of the two dimensions. 1920 and 1080 share a divisor of 120, giving 16:9. 3024 by 4032, a common phone photo, reduces by 1008 to 3:4. Where the numbers do not reduce cleanly the convention is to express it as a decimal against one, which is why cinema uses 2.39:1 and social platforms specify 1.91:1 — neither has a tidy whole-number form.
Solving for a missing dimension is the everyday use. Given a target width and a ratio, the height is the width times the second term divided by the first. A 16:9 image at 1200 wide is 675 tall. Doing this arithmetic rather than eyeballing it is what stops a set of images from being almost but not quite consistent, which is far more visible in a grid than a single wrong image ever is.
The ratios that matter, and where
Different industries settled on different shapes for reasons that are mostly historical, and knowing which is expected where saves a round of rework.
Photography largely uses 3:2, inherited from 35mm film, which is why most interchangeable-lens cameras produce it. Phone cameras commonly default to 4:3, matching their sensor shape, with a 16:9 option that crops rather than widens. That single difference is why a photo taken on a phone and one taken on a camera do not tile neatly together without cropping.
Video is 16:9 almost everywhere, having replaced the 4:3 of broadcast television. Vertical video is 9:16, the same ratio inverted, and is now the default for short-form platforms. Cinema is wider still, typically 1.85:1 or 2.39:1, which is why letterboxing appears when a film plays on a 16:9 screen.
Social platforms each publish their own specifications and they change, but the shapes are stable. Square at 1:1 remains safe nearly everywhere. Link previews and open graph images are 1.91:1, conventionally rendered at 1200 by 630. Portrait feed images are usually 4:5, which occupies more vertical space than square without being rejected. Anything outside a platform's accepted range is cropped automatically, and the crop is rarely where you would have chosen.
Print is a separate world governed by paper. ISO A-series paper has a ratio of one to the square root of two, approximately 1:1.414, chosen so that halving the long side preserves the ratio — which is why A4 folded gives A5 exactly. North American Letter is close to 1:1.294 and does not have that property, so a document laid out for one and printed on the other never scales cleanly.
Cropping, scaling and the third option
Fitting an image of one ratio into a space of another has exactly three outcomes, and every image tool and CSS property is choosing between them.
Cropping preserves the proportions of the subject and discards content at the edges. In CSS this is object-fit cover, and it is the right default for photographs because distortion is far more noticeable than a trimmed edge. Its failure mode is composition: an automatic centre crop cuts heads off portraits and removes the subject from anything composed off-centre. Where the tool allows a focal point, setting one is worth the few seconds.
Letterboxing preserves everything and adds empty space, which is object-fit contain. It is correct for logos, diagrams, screenshots and anything where losing an edge would lose meaning. The empty area needs a deliberate background colour, since a transparent or white band against a dark layout is more conspicuous than the image.
Stretching preserves everything and distorts it, which is object-fit fill and the browser default for a plain image element with both dimensions set. It is almost never what anyone wants. Faces are the giveaway — the eye detects a few percent of horizontal stretch in a face instantly while missing the same distortion in a landscape entirely.
The rule that follows is to lock one dimension and let the other follow when resizing, which is what any resizer does when the aspect lock is engaged. Specifying both dimensions independently is how images get squashed, and it is the single most common image mistake on the web because setting a width and a height on an image element is otherwise good practice for layout stability.
Combining several images into one sheet raises the same question at a different scale. A contact sheet or comparison strip made from images of mixed ratios has to normalise them somehow, and picking one target ratio and cropping to it produces a more coherent result than fitting each into a padded cell.
Why a favicon is not one image
Favicons look like the simplest possible image task and carry more requirements than any other asset of comparable size.
The reason is that the icon appears at radically different scales — a browser tab at 16 pixels, a bookmark bar, a desktop shortcut at 48, a home screen at 180 or more — and an image scaled down to 16 pixels by a browser is unreadable mush. Detail that reads at 512 pixels becomes noise at 16, so the small sizes need a genuinely different, simpler drawing rather than the same one shrunk.
The ICO format exists to solve this. It is a container holding several images at different sizes, so one file can carry purpose-made 16, 32 and 48 pixel versions and the browser picks the right one. This is why the traditional favicon.ico persists despite being an old Windows format: no other single file does that job.
Modern practice supplements it rather than replacing it. An SVG favicon scales to any size and can respond to a dark colour scheme through a media query inside the file, which raster formats cannot do. A 180 pixel PNG serves as the Apple touch icon for iOS home screens, which ignores the ICO entirely. And a web app manifest referencing 192 and 512 pixel PNGs covers Android home screens and installed applications.
The practical set is therefore an ICO with 16, 32 and 48, an SVG for scalable use, a 180 PNG for iOS, and 192 and 512 PNGs for the manifest. Every one of these is square. Supplying a non-square source means something crops it, and the something is not going to choose well.