How to reduce image file size without ruining quality
The minimum-effort recipe for cutting image weight by 60–80% while keeping things sharp on retina displays.
You've got a 4 MB hero image and your Lighthouse score is screaming. Good news: you can probably cut that to 800 KB — or less — without anyone noticing a difference. Here's the playbook.
Step 1: Resize to the dimensions you actually need
This is the single biggest win most people skip. A 4000×3000 photo displayed at 1200×800 CSS pixels is wasting 75% of its data — even on a 2× retina display, you only need 2400×1600.
Rule of thumb: export at 2× your largest CSS display size. If the image container is 600px wide, export at 1200px.
You can resize images instantly in our resize tool — no upload, no signup.
Step 2: Pick the right format
Not all formats compress equally:
| Format | Best for | Typical savings vs JPEG | | ------ | --------------------- | ----------------------- | | WebP | Photos, illustrations | 25–30% smaller | | AVIF | Photos, gradients | 40–50% smaller | | PNG | Screenshots with text | Lossless, often larger |
For photographic content, AVIF is the clear winner in 2026. For screenshots or UI elements with sharp text, stick with PNG or lossless WebP.
Step 3: Set quality to 76–80
Most compression tools default to quality 85 or 90. That's too high for web delivery. At quality 78:
- File size drops 30–40% compared to quality 90
- Quality loss is invisible at normal viewing distances on any screen
Below quality 60, you'll start seeing artifacts — especially in JPEG, which shows blocky 8×8 DCT patterns. WebP and AVIF degrade more gracefully.
Step 4: Strip metadata
EXIF data from your camera can add 50–200 KB per image. GPS coordinates, camera model, lens info — none of it matters on the web, and it's a privacy concern too.
Most browser-based compression tools (including ours) strip metadata by default. If you're using a build pipeline, make sure your image optimizer has metadata stripping enabled.
Step 5: Lazy-load below the fold
This isn't about file size, but it's about perceived file size. Images below the fold shouldn't load until the user scrolls near them:
<img src="photo.webp" loading="lazy" decoding="async" alt="..." />
The loading="lazy" attribute is supported in all modern browsers and requires zero JavaScript.
The quick version
- Resize to 2× CSS dimensions
- Convert to AVIF (with WebP fallback)
- Compress at quality 76–80
- Strip metadata
- Lazy-load below the fold
That sequence alone typically reduces total image weight by 60–80%. You can handle steps 1–4 entirely in your browser with Tiny Pixel Kit — no upload, no install, no account.