Why resize while preserving ratio
The ratio is the visual fingerprint of the image. Any object, person or composition was captured or designed at a certain proportion. Change it (e.g. shrink width while keeping height) and the result stretches or squashes. Preserving the ratio guarantees the image scales without distortion.
The formula
If you fix a new width:
newHeight = newWidth * (originalHeight / originalWidth)If you fix a new height:
newWidth = newHeight * (originalWidth / originalHeight)Same operation any image editor performs when "constrain proportions" or the lock icon is on.
Recommended web sizes
- Hero / banner: 1920×1080 (16:9) or 2560×1080 (ultrawide).
- Open Graph: fixed 1200×630.
- Card thumbnail: 600-800 wide, height per ratio (typically 16:9 or 4:3).
- Avatar: 200×200 minimum, 400×400 better for retina.
- Logo: SVG if vector, otherwise transparent PNG at the largest required size.
Display density and retina
Modern displays are 2x or 3x. If your image renders in a 400px container on retina, the file must be at least 800 wide (or 1200 for 3x) to look sharp. Rule of thumb: export at double the final display size.
srcset for responsive
Instead of serving one giant image, generate several sizes and let the browser pick:
<img src="hero-800.jpg"
srcset="hero-400.jpg 400w,
hero-800.jpg 800w,
hero-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px">The browser picks based on viewport and density. Saves bandwidth and improves performance.
Compression
Resizing reduces pixels, compression reduces file weight. Ideally do both: resize to the right dimensions, then compress. JPG quality 75-85 is the sweet spot. For PNG, tools like TinyPNG cut weight by 50% with no visible loss. WebP and AVIF are modern formats: same quality at 30-50% lighter files than JPG.
Common mistakes
- Uploading the original: a 4000×3000 photo shown as a 300px thumbnail wastes bandwidth.
- Stretching to fill: if container and image ratios differ, use object-fit: cover or contain.
- Ignoring retina: images that look sharp on standard displays look blurry on retina without 2x assets.