Guide
How to Reduce Image File Size Without Losing Quality
Five concrete methods for shrinking image files — from the biggest lever (resizing) to fine-tuning (stripping metadata) — with guidance on when to use each.
Why reduce image file size?
Large image files slow down web pages, consume bandwidth, hit storage limits, and frustrate users on slow connections or mobile data. Typical reasons to reduce image file sizes:
- Web performance: Images are typically the largest assets on a web page. Reducing image sizes directly improves page load speed and Core Web Vitals scores.
- Storage limits: Cloud storage, CMS upload limits, and email attachment limits all impose file size constraints.
- Social media uploads: Most platforms recompress uploaded images; uploading smaller, pre-optimized files produces better results than uploading large files that get heavily recompressed.
- Mobile data: Users on limited data plans benefit significantly from optimized images.
Method 1: Compress (adjust quality)
Lossy compression reduces file size by discarding image data that is least noticeable to the eye. The quality setting controls the tradeoff between size and quality.
When to use: When the image is already the right size but the file is too large.
How much to compress:
- For web delivery: JPEG at 80–85, WebP at 80–85
- For thumbnails and preview images: JPEG/WebP at 65–75
- For print: JPEG at 90–95
- For hero images and product photos: WebP at 85–90
Savings: 30–70% depending on the original quality and content type.
Watch out for: JPEG artifacts on sharp edges and text. Never compress logos or screenshots with lossy compression — use lossless WebP instead.
Method 2: Resize (reduce dimensions)
Resizing is the most powerful lever for reducing file size. The relationship between pixel count and file size is approximately quadratic: halving the pixel dimensions reduces the pixel count (and file size) by approximately 75%.
When to use: Whenever the image dimensions are larger than they need to be for their display context. A photo that will display at 800px wide on a website doesn't need to be 4000px wide.
How to calculate the right size: Your target dimensions should be the display size × the device pixel ratio. For a 800px CSS container, use 1600px for 2× Retina support. For a 300px thumbnail, 600px is sufficient.
Savings: 50–90% for oversized images. A 4000×3000 photo reduced to 1200×900 is approximately 11× smaller at the same compression quality.
Method 3: Convert to a modern format
Converting from older formats (JPEG, PNG) to modern formats (WebP, AVIF) typically saves 25–50% with no perceptible quality difference.
| Conversion | Typical savings | Best for |
|---|---|---|
| JPEG → WebP (lossy) | 25–35% | Photos |
| PNG → WebP (lossless) | 25–35% | Logos, graphics |
| JPEG → AVIF | 40–55% | Photos (needs fallback) |
| GIF → MP4 (H.264) | 90–98% | Animated content |
| GIF → WebP anim | 60–80% | Animated with transparency |
Converting GIF to MP4 deserves special mention — the savings are enormous. A 10 MB GIF animation typically converts to a 200–500 KB MP4 with better quality.
Method 4: Strip metadata
Image files often contain embedded metadata — EXIF camera data, GPS coordinates, color profiles, thumbnails, and copyright information. This metadata adds file size without contributing to the visible image.
When to use: Before publishing images to the web. Also important for privacy — GPS coordinates in photos can reveal locations.
Savings: 5–30 KB per image. Smaller images see proportionally bigger gains; a 100 KB thumbnail might save 10–20% from metadata removal alone.
Watch out for: Stripping ICC color profiles from non-sRGB images (Adobe RGB, P3) without converting to sRGB first will cause color rendering issues.
Method 5: Reduce color depth (PNG-8)
For PNG images with a limited number of colors — simple logos, icons, flat-color illustrations — converting from PNG-24 (full color) to PNG-8 (256 colors indexed) can dramatically reduce file size.
When to use: For graphics with fewer than 256 colors, or where slight color banding is acceptable (e.g., simple icons at small sizes).
Savings: 60–80% for appropriate content. A simple logo in PNG-8 can be 3–5× smaller than the same logo in PNG-24.
Watch out for: Color banding on gradients. PNG-8 is not appropriate for photographs. For most modern use cases, WebP lossless is a better choice than PNG-8.
How much to compress: a visual quality guide
The right compression level depends on how the image will be used:
| Use case | JPEG quality | WebP quality | AVIF quality |
|---|---|---|---|
| Archival / print delivery | 90–95 | 90–95 | 80–90 |
| Hero / product images (web) | 85–90 | 80–85 | 70–80 |
| Standard web images | 80–85 | 75–80 | 60–70 |
| Thumbnails | 70–75 | 65–72 | 55–65 |
| Background / decorative | 60–70 | 55–65 | 45–55 |
Frequently asked questions
What is the fastest way to reduce image file size?
Resizing the pixel dimensions. Halving both width and height reduces file size by approximately 75% — a 4000×3000 pixel image reduced to 2000×1500 is about 4× smaller, regardless of format. If the image is larger than its display size on the page, resizing is the single biggest lever. After resizing, convert to WebP for additional 25–35% savings over JPEG.
Can I reduce file size without losing quality?
To a degree, yes. Lossless optimizations — stripping metadata, reducing color depth (for PNG-8 graphics), and re-encoding lossless WebP — reduce file size without losing any pixel data. Resizing is also lossless in that the resized image is still the full quality at its new size. For photographs, some quality loss is inevitable for meaningful compression beyond these lossless steps.
What is the best format for small file sizes?
AVIF produces the smallest file sizes, followed by WebP, then JPEG, then PNG. For photographs: AVIF at quality 60–70 matches JPEG at quality 90 at half the file size. WebP at quality 80–85 matches JPEG at quality 90 with 25–35% savings. For graphics and logos: WebP lossless is typically 25–35% smaller than PNG with identical quality.