Give it a ratio and one dimension and it returns the other. Give it two dimensions and it returns the ratio. Everything is worked out in this tab, with nothing to upload and nothing to sign up for.
16 : 9 — 1,920 × 1,080 px
A ratio is a shape. A resolution is a shape and a size. 1280 × 720, 1920 × 1080 and 3840 × 2160 are three resolutions of one ratio, so a brief that says “make it 16:9” has specified the shape and said nothing at all about how many pixels to export.
That gap is where the argument happens. Ask for a 16:9 image, receive a 640 × 360 file, and nobody has made a mistake — the ratio was satisfied exactly. Density is a third thing again: exporting at 2× changes the resolution and leaves the ratio alone. Name the ratio when you mean the shape, and give pixel dimensions when you mean the file.
Television was 4:3 and cinema had scattered from 1.66:1 to 2.39:1. When the standards committees looked for a single shape for digital television in the 1980s, the argument that carried was geometric: the shape sitting midway between the extremes in use — midway by multiplication rather than by addition, since a ratio and its reciprocal are the same shape turned over — wastes the least when everything else has to be fitted into it. 16:9 is where that argument landed, and it has an exact form worth knowing: it is 4:3 squared, and it is the geometric mean of 4:3 and 64:27 — 64:27 being 4:3 cubed, which lands at 2.37:1, inside the range cinema was already shooting.
It is now the default of nearly every camera, screen, projector and codec, so stepping outside it costs bars or a crop somewhere. The real change since is that the phone put 9:16 in the same position for anything watched upright, while 4:5 is the tallest shape a post can take in an Instagram feed. One shoot is routinely framed for two ratios at once.
Put a 16:9 video in a 4:3 frame and something has to give, because the two shapes do not nest. There are two honest answers.
Stretching to fit is a third option only in the sense that it is always wrong, and everyone can see it. The blurred duplicate beside a vertical clip in a landscape frame is pillarboxing with the bars decorated. When a crop is coming — on social it always is — frame for it, and keep the subject inside a centre area that survives the widest and the tallest ratio the clip will be cut to.
Choose one ratio per slot and hold it at every breakpoint. A card that is 16:9 on desktop and 4:3 on a phone needs two crops, two exports and a <picture> element; one that keeps its ratio needs a single image that scales. Flatter ratios survive narrow screens better, because a tall image pushes the words under it off the screen.
Reserving the space is what stops the layout jumping as the page loads. The old technique was padding-top: 56.25% on an empty wrapper, which works because percentage padding resolves against the container’s width, and 9 ÷ 16 is 0.5625. It costs a wrapper, a magic number recalculated for every ratio, and a child that has left normal flow.
aspect-ratio: 16 / 9 does the same job in one declaration on the element itself, written the way you say it out loud, and it pairs with object-fit: cover when the source is the wrong shape. On an <img>, the plain width and height attributes are read as a ratio too, and reserve the box before the file arrives.
| Ratio | Where it is expected |
|---|---|
| 16:9 | YouTube, nearly all video, and almost every screen and projector sold. |
| 9:16 | Stories, Reels, TikTok and Shorts — anything watched with the phone upright. |
| 4:5 | The tallest shape an Instagram feed post can take, so it occupies the most screen. |
| 1:1 | Profile pictures, product grids and thumbnails that have to tile. |
| 1.91:1 | Open Graph and Twitter share cards, usually exported at 1200 × 630. The OG image generator builds one at that size. |
| 4:3 | Older displays, Micro Four Thirds, and most compact and phone sensors. |
| 3:2 | A 35mm frame is 36 × 24 mm, and full-frame and APS-C sensors kept it. |
| 5:4 | Large-format sheet film and a 10 × 8 print. |
| 2:3 | A 4 × 6 print, upright — the same shape as 3:2 turned on its side. |
| 21:9 | Ultrawide monitors and video graded to look cinematic. |
The last row carries a catch. 21:9 is a marketing name rather than a measurement: the panels sold under it are 2560 × 1080 and 3440 × 1440, which reduce to 64:27 and 43:18. A literal 21:9 export lands about a percent and a half out, enough to leave a thin bar on a screen you meant to fill. Paste either size into the second tab and it reduces to the real shape rather than the label.
Most video encoders also want both dimensions even, because colour is stored at half resolution in the common formats. An odd height is the kind of thing that fails at the end of a long render, and the note under the first tab points at the nearest pair that divides cleanly.
CSS Grid generator
Draw a grid, copy the CSS. Flexbox on a second tab.
PX to REM
Both directions against any root size, plus a type scale you can copy.
SVG to PNG
Convert SVG files to PNG at any scale, in the browser. Batch and transparent background.
HEX to RGB
Paste a hex colour, get RGB, HSL and CSS you can copy.
RGB to HEX
The other direction, with the same converter underneath.
PNG to SVG
Trace a bitmap into vector paths, in the browser. Honest about when it works.
Designing a site? Siter.io builds it from Figma.