Aspect Ratio
The proportion of an image's width to its height, from early film's nearly square frames through cinema's widescreen answer to television, the 16 by 9 compromise, and the vertical video of phones.
Aspect ratio is the proportion of an image's width to its height, written as two numbers such as 4:3 or 16:9, or as a single decimal such as 2.39:1. It shapes how images are composed, how they fit on screens and pages, and what happens when an image made for one shape is shown on another.
Film history explains most of the common ratios. Early films used a frame about 4 by 3. When sound arrived, the soundtrack took space on the film strip, and the industry standardized on a similar proportion, the Academy ratio of about 1.37:1, in 1932. Television adopted 4:3 to match.
In the 1950s, cinema responded to competition from television by going wide. Systems such as Cinerama and CinemaScope offered sweeping images that a living room set couldn't match. CinemaScope used anamorphic lenses, which squeeze a wide image horizontally onto standard film and unsqueeze it during projection. Ratios around 1.85:1 and 2.39:1 became standard for films.
Showing a wide film on a 4:3 television forced a choice:
- Letterboxing shows the whole frame with black bars above and below.
- Pan and scan crops the sides, with an editor choosing which part of each shot to keep, often cutting characters out.
- Pillarboxing, the reverse of letterboxing, adds bars at the sides when narrow images appear on wide screens.
The 16:9 ratio of modern televisions was chosen in the 1980s as a compromise. The engineer Kerns Powers proposed it as roughly the geometric mean of the common film and television ratios, so that all of them could fit with modest bars. It's not the golden ratio, which design folklore often claims for pleasing rectangles.
Pixels themselves haven't always been square. Standard-definition digital video stored 720 samples per line for both 4:3 and 16:9 pictures, so pixels were stretched on display. Older computers and consoles also used non-square pixels, which is why pixel art can look squashed in emulators. Paper has its own logic: international sizes use a ratio of the square root of two, so folding a sheet in half preserves its proportions.
Phones brought vertical video. Smartphones are usually held upright, and social apps adopted 9:16 frames for stories and short videos, inverting television's shape. Gaming monitors went the other way, to ultrawide 21:9.
On the web, images and videos that load without known dimensions cause content to jump as they arrive. Declaring an aspect ratio lets the browser reserve space in advance; see Layout Shift and Responsive Images. Changing an image's ratio without distortion means cropping, padding, or content-aware resizing.
See also2
Grid System
A shared set of columns, gutters, and alignment lines that constrains where content can sit, so unrelated layouts still read as one system.
Design & Interface13 connections
Pixel
The smallest addressable element of a digital image or screen, better understood as a point sample than as a little square, whose physical form, shape and density vary enough between devices that the web had to invent a separate reference pixel.
Graphics & Rendering6 connections
Linked from2
- Grid SystemDesign & Interface
A shared set of columns, gutters, and alignment lines that constrains where content can sit, so unrelated layouts still read as one system.
- PixelGraphics & Rendering
The smallest addressable element of a digital image or screen, better understood as a point sample than as a little square, whose physical form, shape and density vary enough between devices that the web had to invent a separate reference pixel.