Screen aspect ratio:
reducing a resolution to 16:9, 4:3 and friends

Shape, not size

The aspect ratio of a screen or image is its width compared with its height, written as two numbers: 16:9, 4:3, 1:1. It tells you the shape and ignores the size. A 32-inch TV and a phone video can both be 16:9 even though one has millions more pixels.

Two things go wrong when shapes do not match. If you stretch an image to fill a different shape, circles turn to ovals. If you keep its shape, either bars appear on the sides or top (letterboxing, pillarboxing) or part of the picture is cut off by cropping.

Knowing the ratio makes these effects predictable before you export a video, design a banner or buy a monitor.

Reducing a resolution to a ratio

Take the pixel width and height and divide both by their greatest common divisor, the largest whole number that goes into both. What remains is the ratio in its simplest form.

Finding the divisor by hand: for 1920 and 1080, 1920 − 1080 gives 840, 1080 − 840 gives 240, 840 leaves 120 after three subtractions of 240, and 240 is exactly two 120s, so g = 120. The same method works for any pair, and a calculator does it in a flash.

Common resolutions and their ratios

Notice that some resolutions do not reduce to a neat pair. 1366 × 768 gives 683:384 because the width is a rounded-off version of a true 16:9 shape (768 × 16 ÷ 9 = 1,365.3). So 'ultrawide 21:9' is a marketing label; the real ratios are closer to 64:27 or 43:18.

From a diagonal in inches to real width and height

Screens are sold by diagonal size, but the diagonal alone does not give the width or height. With the aspect ratio known, Pythagoras fills in the rest.

This is why two screens with the same diagonal can look different in size: a squarer shape holds more area for the same diagonal. 27 inches of 21:9 is noticeably less tall than 27 inches of 16:9.

Resizing and fitting into another frame

To change an image's size while keeping its shape, fix one dimension and compute the other from the ratio.

For a banner slot that is 800 px wide in a 4:3 frame, the height is 800 × 3 ÷ 4 = 600. Always round to a whole pixel and, for video, to an even number, since many codecs need even dimensions.

When the source and the frame have different ratios, you must choose between bars and cropping.

• Letterbox or pillarbox: keeps the whole image, adds black bars, no cropping.
• Crop to fill: no bars, but edges are lost, so keep faces and text near the centre.
• Stretch: avoid it; it distorts every shape in the image.

Pixel density and what it shows

Combine resolution with the diagonal and you get pixels per inch, a measure of sharpness. It uses the diagonal in pixels: √(width² + height²), divided by the diagonal in inches.

A higher density means smaller pixels and finer text. The same resolution looks sharp on a phone held close and coarse on a large monitor, because viewing distance matters as much as density.

Print has its own ratios: A-series paper is 1 : 1.414, a 6 × 4 inch photo is 3 : 2 and an 8 × 10 print is 5 : 4. A camera photo (3 : 2) printed at 8 × 10 loses part of the picture to cropping, much like the 4:3 to 16:9 case above.

Picking a ratio for the job

Platform specs change, so check the current upload guidance before exporting a video. If you design for the widest and tallest case, a safe zone in the middle that survives every crop keeps the important content visible everywhere.

Designing for more than one shape

Websites, apps and videos are rarely seen on a single screen shape. A design that assumes 16:9 breaks on a tall phone and looks sparse on an ultrawide monitor. The practical answer is to define a safe zone: the part of the layout that must survive every crop, kept toward the centre.

For video, shoot or frame with the widest and tallest delivery formats in mind. A horizontal video that will also be cut into a 9:16 short needs the subject near the middle third of the frame, where the vertical crop still holds it. The width of that central strip is 9 ÷ 16 of the frame height, so for a 1080-pixel-tall master it is about 608 pixels wide.

For web layouts, set images with a fixed aspect ratio, so the browser reserves the right space before the file has loaded and the page does not jump. Responsive images can be served in more than one crop, one for wide screens and one for narrow ones, so faces and text do not end up trimmed off the edge.

For presentations, decide the ratio before you build the slides. Converting a deck from 4:3 to 16:9 after the event leaves gaps or stretches the logos, and tidying that takes longer than choosing at the start.