How to reduce image size
A priority-ordered playbook for smaller files without guessing at random quality numbers.
Key takeaway
Best order: (1) resize away unused megapixels, (2) choose a format that fits the content, (3) fine-tune quality. Format-only or quality-only fixes often disappoint.
Why files get heavy
Size comes from pixel count, compression efficiency, and content complexity. Phone originals, lossless PNGs, oversized WEBP, and uncropped screenshots each need different treatment.
Priority 1: Resize
If the layout shows 1200px, shipping 4000px wastes bandwidth. Set max dimensions first—article images often start around 1200–1600px wide; thumbnails much smaller; retina may justify 1.5–2× the CSS size.
Priority 2: Format
| Content | Try first | Note |
|---|---|---|
| Photos | JPG or WEBP | PNG often bloated |
| Transparent logos | WEBP or PNG | Not JPG |
| UI screenshots | PNG (or careful WEBP) | Protect text |
| iPhone masters | Convert by destination | Avoid raw HEIC on the web |
Priority 3: Quality / re-encode
Only after dimensions and format are sane should you move the quality slider. Zoom skies, skin, and type. Recompressing an already crushed download may buy little.
Hitting a KB cap
Work backwards from the limit: step down resolution, then quality. Do not nuke quality first if text must stay readable. Target-KB controls in local compressors help iteration.
Batch tips
- Lock settings on 3 representative images
- Batch the rest
- Spot-check random outputs
- Keep originals and derivatives separate
Avoid
- Overwriting masters
- Forcing transparent logos to JPG
- Extreme quality cuts without resizing
- Believing guaranteed “80% smaller” claims
Tool map
- JPG → JPG / general compressor
- Photo PNG → JPG or WEBP
- WEBP → WEBP compressor
- HEIC → JPG/WEBP, then compress if needed
Prescriptions by scenario
200KB application photo: crop to face → resize ~700–1000px → search the lowest readable JPG quality. Dimensions usually matter before fancy retouching.
Ten PDP images: lock a shared width → derive WEBP/JPG → give heroes quality headroom → make thumbs much smaller. Use total MB as the KPI so one pretty file does not hide nine heavy ones.
Blogged iPhone shots: archive HEIC → resize to content width → publish WEBP/JPG → compress more if needed. Uploading camera originals is often how bloat starts.
Measure first
Weigh the page’s image bytes in DevTools. Fixing the largest three files often beats tinkering with everything. Prefer tickets scoped to top-N assets. Afterward, scroll on a real phone—gradient heroes fail there first.
Privacy while you shrink
Cleaning metadata on public derivatives can ride along with size work, but re-encoding needs the same zoom QA. Keep masters either way.
A one-week shrink sprint
Day 1 measure top pages and list the heaviest 15 assets. Day 2 resize. Day 3 switch formats. Day 4 tune quality on leftovers. Day 5 publish rules. Definition of done is impact, not perfection—track total image KB, LCP, and breakage reports. Then fix CMS defaults so new uploads do not undo the win.
Manual rules before automation
CDN transforms will keep chewing bad uploads unless humans internalize max width/format/QA. Land one visible win (e.g., 8MB→3MB on a landing) and attach compressor/resizer/converter links to that write-up before you automate.
One-page summary
Resize → format → quality. Start with the heaviest assets, keep masters, publish measured wins, and only then automate. Whether the goal is a KB cap or LCP, unmeasured optimization becomes taste. Take the three heaviest images on your homepage and run them through resize/compress/convert today; ship the winners before scheduling a broader workshop.
Put the before/after byte table in the engineering channel so the next feature team sees that media weight is a shared budget, not a once-a-year cleanup chore.
Appendix: owning the budget
Assign a named owner for media weight on each major template. Unowned budgets always return to bloat after the next campaign. The owner does not need to encode every file; they need permission to reject oversized uploads before launch.
Related tools
FAQ
Is lowering quality enough?
Not if dimensions are excessive—resize first.
Which format is smallest?
Depends on content—compare WEBP/JPG for photos and WEBP/PNG for alpha.
Can I shrink many files at once?
Yes—calibrate, then batch.
Delete originals?
Prefer keeping masters and uploading derivatives.
Still over the limit?
Reduce dimensions further or crop unused areas.