A food blogger sent 4000×3000 photos to a theme displaying 800×600 — every visitor downloaded 5× the pixels their screen could show. Page weight: 9MB. After resizing to display size plus 80% compression: 1.1MB, visually identical. Resize first, compress second — compressing pixels you will discard wastes the entire quality budget. This guide covers exact dimensions, aspect locks, and the resize-vs-compress order with presets for every common slot.
Part of the image optimization guide. Resize in the image resizer (aspect locked by default); then compress in the image compressor. Format choice in formats guide.
Order of operations: crop → resize → compress
- Crop composition changes in the image cropper (passport frames, avatar squares, banner ratios).
- Resize to exact display pixels in the image resizer — this is where megabytes die.
- Compress at 80% in the image compressor for the final squeeze.
- Verify at 100% zoom: edges sharp, text legible, no banding in skies.
Reversing steps 2 and 3 costs ~15% extra bytes for identical visual quality in my tests — the compressor spends budget smoothing pixels the resizer then deletes.
Presets that cover 95% of jobs
| Slot | Size | Then compress to |
|---|---|---|
| Blog hero / OG cover | 1200 × 630 | WebP 80%, target <180KB |
| Instagram square | 1080 × 1080 | JPG 80% |
| Thumbnail grid | 400 × 300 | JPG 75%, tiny files |
| Passport photo | 600 × 600 | JPG 80% after crop |
| Full-width banner | 1920 wide | WebP 80%, watch 300KB cap |
Check the open graph preview after exporting covers — 1200×630 renders differently per network, and LinkedIn crops sides slightly.
Aspect lock: the stretched-face epidemic
Unchecking “maintain proportions” to force 1080×1080 from a 4:3 photo stretches faces 33% wider — the most common resize embarrassment I review, and it reads as careless instantly. Rules: lock aspect always; if the slot demands a different ratio, crop first (see passport cropping), never stretch. For responsive images, export 2–3 widths (400/800/1200) and let srcset serve each screen appropriately instead of one giant file for all.
Limits: 8192px, 10MB and upscaling lies
Our resizer caps at 8192px per side and 10MB per file — oversized uploads fail fast with a clear message instead of hanging your tab. More important: resizing up never adds detail. A 400px image blown to 1200px just makes bigger blur (AI upscalers aside — different technology, different tool). Design forward: shoot and export larger than needed, downscale for delivery. And batch wisely — a 12-photo wedding set resizes fine on a laptop but will stall a budget phone; do six at a time there.
General guidance only. Always compare before/after at 100% zoom on the display you ship for — phone screens hide flaws desktop monitors reveal.