2026-05-31 · 1 min read
Compress images before slow uploads
Resize for layout, compress for bytes—check visual quality on real devices.
Key takeaways
- Resize to the maximum display width you truly need.
- Re-check sharpness on retina screens after aggressive compression.
Right-size first
Downscale oversized photos to the width your UI actually renders—compression alone cannot invent lost detail responsibly.
Then compress
Apply compression iteratively: smaller steps preserve more detail than one extreme jump.
Pair with QR generation if you are placing compressed assets into printed collateral.
Resize before compress
A 4000px screenshot compressed at 70% is still huge. Resize to the CMS max width first, then compress—LCP budgets care about bytes after both steps.
Prefer WebP for photos and PNG for UI with sharp edges. Re-encoding a PNG screenshot as JPEG introduces ringing around text.
FAQ
PNG or JPEG?
JPEG for photos, PNG when you need transparency; modern sites also use WebP when supported.
Do file tools upload images?
Yes—only upload images you are allowed to process on the server.