The test methodology
60 images from four categories — DSLR photographs, product shots on white backgrounds, UI screenshots, and digital illustrations — compressed at every quality level from 50 to 100 using the browser-based image compressor. Each output was evaluated for:
- File size reduction percentage vs. the original
- Visible artifacts at 1× and 2× zoom on a 4K display
- Lighthouse performance score impact on a test page
JPEG quality settings — the real numbers
| Quality setting | Avg. size reduction | Visible quality loss? | Use when |
|---|---|---|---|
| 90–100 | 10–25% | None | You need maximum quality and file size is secondary (printing, raw archival) |
| 82–89 | 30–50% | None on screen | Product photos where quality is paramount; social media posts |
| 75–82 ★ sweet spot | 60–80% | None at normal viewing | Web images, email attachments, WordPress uploads — the default for most cases |
| 65–74 | 80–88% | Visible in sharp edges and text on images | Thumbnails only — not for primary content images |
| 50–64 | 88–93% | Clear blocking artifacts | Avoid — noticeable quality degradation in all test images |
The sweet spot is quality 75–82. A hero image that came out of Figma at 3.2 MB dropped to 412 KB at quality 80 with no visible difference on a 4K monitor at 1×. That single image change moved a Lighthouse LCP score from 62 to 84.
WebP vs JPEG — is it worth switching?
WebP (lossy) consistently produced files 25–34% smaller than JPEG at the same quality setting across all four image categories:
| Image type | JPEG Q80 size | WebP Q80 size | WebP saving |
|---|---|---|---|
| Landscape photograph (2000×1333) | 310 KB | 218 KB | 30% |
| Product photo on white (1000×1000) | 145 KB | 98 KB | 32% |
| UI screenshot (1440×900) | 420 KB | 280 KB | 33% |
| Digital illustration (800×800) | 195 KB | 135 KB | 31% |
WebP browser support is effectively universal in 2026 (Chrome, Firefox, Safari 14+, Edge). The main exception: some email clients (particularly Outlook on Windows) do not render WebP — use JPEG for email attachments.
PNG — when compression doesn't help
PNG is lossless — the "quality" slider in most tools changes the PNG compression level (1–9), not image quality. Higher compression levels produce smaller files but take longer to encode. In practice:
- PNG compression level 6–9 reduces file size by 5–15% vs. level 1 for most images
- For photographs, converting PNG to JPEG or WebP produces 70–90% smaller files than any PNG compression level
- Keep PNG only for images with transparency or sharp pixel-art content (logos, icons, screenshots with text)
Target file sizes by platform
| Platform / use case | Target size | Quality setting to start at |
|---|---|---|
| Email attachment | Under 1MB | JPEG Q75–80 |
| Web hero image | Under 200KB | WebP Q78–82 |
| WordPress media upload | Under 500KB | JPEG or WebP Q80 |
| Shopify / Etsy product | Under 1MB | JPEG Q82–85 |
| Instagram upload | Under 8MB (let Instagram compress) | JPEG Q88–90 |
| PDF embedded image | Under 500KB per image | JPEG Q70–78 |
When the quality slider isn't enough
If you need the file under a hard limit (say, 200KB for a web form) and Q75 still produces 350KB, the image needs dimensional resizing — not just compression. A 2400×1600 image at Q75 is larger than a 1200×800 image at Q80. The combination of resize + compress is the right approach:
- Resize first — use the free image resizer to reduce dimensions to the maximum needed (e.g., 1200px wide for a web banner)
- Then compress — use the compressor on the resized image; the smaller canvas means far fewer pixels to encode
Applying compression to a full-resolution image and then resizing is less efficient — the compressor is working on more data than will ever be displayed.