How to Compress Images Without Obvious Quality Loss
Picking the right format and quality setting to cut image weight by half or more.
Most images on the web are several times larger than they need to be. The gap is not usually about the compression slider — it is the wrong format, the wrong dimensions, and metadata nobody wanted shipped.
Lossless versus lossy
Lossless compression rebuilds the original bit for bit; lossy discards detail the eye is poor at noticing and never gets it back. For photographs, lossy at a sensible quality is invisible and several times smaller. For screenshots, logos and line art, lossy produces visible fringing around edges.
| Content | Best format | Typical saving vs PNG |
|---|---|---|
| Photographs | AVIF, then WebP, then JPEG | 60–85% |
| Screenshots with text | PNG or lossless WebP | 20–40% |
| Logos and icons | SVG | 90%+ |
| Images needing transparency | WebP or AVIF | 40–70% |
| Animation | WebP or MP4, not GIF | 80–95% |
Resize before you compress
The single biggest win is dimensional. A 4000-pixel-wide photo displayed in a 800-pixel column carries 25 times more pixel data than the layout can show. Resize to roughly twice the display width to stay sharp on high-density screens, then compress.
useful width ≈ CSS display width × device pixel ratio (cap at 2)Choosing a quality level
JPEG and WebP quality settings are not percentages of visual fidelity. In practice:
- 90–100: archival, wasteful for the web, large files with no visible benefit.
- 75–85: the sweet spot for photographs; artefacts are hard to see at normal viewing distance.
- 60–75: acceptable for thumbnails and background imagery.
- Below 60: visible blocking in gradients such as skies and skin tones.
Strip what you are not using
Camera files carry EXIF metadata including GPS coordinates, serial numbers and full-size thumbnails. Removing it saves kilobytes on every image and removes a genuine privacy leak from photos published online.
Serving them well
- Set width and height attributes so the browser reserves space and avoids layout shift.
- Add loading="lazy" to anything below the fold, but never to your hero image.
- Offer modern formats with a picture element and a JPEG fallback.
- Serve responsive sizes with srcset rather than one file for all viewports.
The image compressor, image resizer and JPG to WebP converter run locally in the browser, so originals never leave the device.
Frequently asked questions
Is WebP still worth using now that AVIF exists?
Yes. AVIF compresses better but encodes slowly and has patchier support in older software. Serving AVIF with a WebP fallback covers almost everything.
Does compressing an image affect SEO?
Indirectly and significantly. Page speed is a ranking signal and images are usually the heaviest asset, so compression improves Core Web Vitals and perceived quality.
Why did my PNG get bigger after compression?
PNG is already lossless; re-encoding an optimised PNG can add overhead. Convert it to WebP instead, or use a PNG-specific optimiser that reduces the palette.
What resolution should I upload for a blog header?
Around 1600 pixels wide at quality 80 in WebP suits most layouts, landing near 100–200 KB.