The Frame of Reference: Aspect Ratio
Aspect Ratio is the proportional relationship between the width and the height of an image or screen. It is expressed as two numbers separated by a colon (e.g. 16:9). Understanding aspect ratios is critical for ensuring that content (movies, games, or presentations) is displayed correctly without 'letterboxing' (black bars at the top and bottom) or 'pillarboxing' (black bars at the sides).
Common Industry Standards
- 16:9 (1.77): The universal standard for HDTV, YouTube, and most computer monitors.
- 4:3 (1.33): The 'Academy Ratio' used for classic television and old movies.
- 21:9 (2.35): 'Ultrawide' cinematic format used in movie theaters and high-end gaming monitors.
- 3:2: Common in photography (DSLRs) and Microsoft Surface laptops.
- 16:10: A popular resolution for productivity-focused laptops (e.g. MacBook Pro).
The Formula
Calculating the aspect ratio involves finding the Greatest Common Divisor (GCD) of the width and height and dividing both numbers by it.
Aspect Ratio = (Width / GCD) : (Height / GCD)
Where:
Width, Height=
The resolution of the screen in pixelsGCD=
The largest number that divides both width and height evenlyContent Stretching vs. Cropping
When content doesn't match the screen's aspect ratio, the device must choose:
- Fit: Shows the whole image with black bars.
- Fill/Crop: Stretches or crops the image to cover the whole screen, which can distort faces or cut off important visual information.