Aspect Ratio Reference for Images
Aspect ratio is width divided by height—common ratios include 16:9 video, 4:3 photos, 1:1 social squares, and 1.91:1 Open Graph.
Quick answer
Aspect ratio = width ÷ height. 16:9 = 1.78 widescreen. 4:3 = 1.33 classic. 1:1 square. 3:2 DSLR photo. Maintain ratio when resizing to avoid stretch—crop or letterbox intentionally. Social: OG 1.91:1 (~1200×630), Instagram square 1:1, Stories 9:16.
Overview
Wrong aspect ratio distorts logos, stretches faces, and crops critical text in social previews. Responsive web images use width descriptors with fixed ratio containers to prevent layout shift. Video players default 16:9; vertical Shorts 9:16. Print frames 4×6 inches same 3:2 ratio as digital 3000×2000 px exports. Image resizers lock ratio when scaling down for thumbnails or enforce crop window for hero banners. Designers document ratio tokens alongside pixel dimensions so developers implement CSS aspect-ratio property consistently.
Common aspect ratios and uses
16:9 HD video, YouTube embeds, presentation slides widescreen. 4:3 legacy slides and tablets. 1:1 Instagram feed posts profile grids. 9:16 vertical Reels TikTok Stories.
3:2 35mm photo print standard. 2:3 Pinterest pins vertical. 21:9 ultrawide cinematic letterbox.
Open Graph and platform-specific sizes
OG recommended 1200×630 px (1.91:1). Twitter summary_large_image similar. LinkedIn shares OG tags. Platform safe zones avoid critical text at crop edges on mobile.
Profile avatars often square circle-cropped—center face in 1:1 source.
Resize vs crop vs letterbox
Lock aspect ratio scale: reduce 4000×3000 (4:3) to 800×600 maintaining proportion. Changing ratio requires crop (remove pixels) or letterbox/pillarbox padding bars.
Object-fit CSS cover fills container cropping overflow; contain shows full image with possible bars.
CSS aspect-ratio and layout stability
aspect-ratio: 16 / 9 on wrapper reserves space before image load reducing CLS Core Web Vitals penalty. Pair with width 100% height auto img.
Art direction picture element serves cropped 1:1 vs 16:9 sources at breakpoints—not one stretched image.
Print DPI vs screen pixels
Ratio independent of DPI—8×10 inch print 4:5 ratio equals 2400×3000 px at 300 DPI export. Do not confuse pixel count with ratio.
Upscale low-res image to correct ratio canvas without source pixels does not add detail—shoot or source adequate native resolution.
Examples
16:9 thumbnail
1280×720 and 1920×1080 both 16:9—scale between without crop.
Square crop from DSLR
4000×2667 (3:2) center crop 2667×2667 loses horizontal wings for Instagram post.
Common mistakes and edge cases
- Stretching image to fit banner without crop.
- Uploading square logo as OG image for wide card layout.
- Ignoring EXIF orientation showing wrong effective ratio.
- Mixing aspect ratio with file size KB when optimizing delivery.
Related resources
Related tools
Last reviewed: 2026-05-23