Image Compression Explained: How to Shrink Files Without Visibly Hurting Quality
Compression is the difference between a 5 MB photo that takes ten seconds to load and a 200 KB version that loads instantly and looks identical to the human eye. This guide explains the trade-offs behind every compression slider — lossy vs lossless, JPEG vs WebP vs AVIF — and how to pick settings that keep your images crisp.
When you save a photograph in JPEG format, your computer doesn't store every pixel exactly. It throws away information that the human eye is least sensitive to — fine color variation, subtle gradient noise — and uses mathematical patterns to describe what's left. The harder it compresses, the more aggressive that throwing-away becomes, and at some point the compromises become visible as blocky artifacts and color banding.
The art of image compression is finding the sweet spot where the file is as small as possible while the image still looks indistinguishable from the original to a casual viewer. That spot moves around depending on the image content (photos compress more than line art), the format (WebP and AVIF beat JPEG by 25–50% at the same quality), and the use case (a hero image needs higher fidelity than a thumbnail).
Lossy vs lossless: what's actually being lost
- Lossy compression
- Throws away information that is hard for humans to perceive. Used by JPEG, WebP (default), AVIF, HEIC. Produces dramatically smaller files. Cannot be reversed — the discarded data is gone.
- Lossless compression
- Encodes the same pixels using fewer bits, so the original can be reconstructed exactly. Used by PNG, GIF, lossless WebP. Smaller savings (typically 20–40%), but no quality penalty.
- Quality factor
- A 0–100 slider in JPEG/WebP encoders. 75–85 is the sweet spot for photos. Above 90 the file balloons with little visible benefit; below 60 you start to see artifacts.
- Chroma subsampling
- An optional optimization that stores color at half the resolution of brightness. Saves ~30% with no perceptible loss for photos, but blurs sharp red/blue text. Often expressed as 4:4:4 (off), 4:2:2, or 4:2:0 (most aggressive).
Format comparison at a glance
Approximate file size for a representative 4000 × 3000 photograph compressed to visually-equivalent quality across modern formats.
| Format | Typical file size | Browser support | Best for |
|---|---|---|---|
| JPEG | 1.5 MB | Universal | Photos, when compatibility matters |
| WebP (lossy) | 0.9 MB | All modern browsers | Photos on the web — current sweet spot |
| AVIF | 0.6 MB | Chrome, Firefox, Safari 16+ | Best compression; use with a JPEG fallback |
| PNG (lossless) | 8 MB+ | Universal | Graphics with text, transparency, or hard edges |
| WebP (lossless) | 5 MB | All modern browsers | Smaller PNG replacement when you don't need transparency |
How to compress without visible quality loss
- 1
Resize first, compress second
There is no point compressing a 4000-pixel-wide image if it will be displayed at 1200 pixels. Always resize to the actual display dimensions before compressing — you'll save 80%+ on file size with zero perceptible difference.
- 2
Pick the right format for the content
Photos: WebP (or JPEG for compatibility). Screenshots, logos, diagrams: PNG. Animation: WebP or AVIF. If you're not sure, photos with smooth gradients almost always belong in a lossy format.
- 3
Use quality 75–85 for photos
Quality 80 is widely considered the optimal default — files are roughly 50% smaller than quality 100, and the difference is invisible without pixel-peeping. Drop to 65–70 only when bandwidth is critical.
- 4
Compare side by side at full size
Always view the compressed version at 100% zoom next to the original before publishing. Artifacts that are invisible at thumbnail size become obvious at full screen.
Why over-compressed images look bad
Two artifacts dominate. The first is blockiness — JPEG works by dividing the image into 8 × 8 pixel blocks and encoding each one separately. At low quality the blocks become visible as a checkerboard, especially in smooth areas like sky. The second is color banding, where smooth gradients break into visible stripes because the encoder lacks the bits to represent every intermediate shade.
Both artifacts are most obvious in flat-color and gradient regions. They are nearly invisible in textured areas (foliage, fabric, hair), which is why heavily compressed photos of nature can look surprisingly clean while a photo of a sunset reveals every flaw.
Re-saving an already-compressed JPEG compounds the problem: each save introduces a new round of artifacts on top of the existing ones. If you anticipate editing an image multiple times, keep your master copy in a lossless format (PNG, TIFF, or RAW) and only export to JPEG/WebP for delivery.
Practical compression checklist
- •Hero / banner images: WebP at quality 80, max 200 KB.
- •Article inline images: WebP at quality 75, max 100 KB.
- •Thumbnails: WebP at quality 70, max 30 KB.
- •Email attachments: JPEG at quality 75, under 1 MB total per email.
- •Print: leave uncompressed (TIFF or maximum-quality JPEG); compression for web is wasted on a printer.
Extended FAQ
Will Google penalize my site for compressed images?
No — the opposite. Page speed is a ranking factor, and well-compressed images are one of the easiest ways to improve Largest Contentful Paint. Google's own PageSpeed Insights actively recommends serving images in WebP or AVIF.
Can I un-compress a JPEG?
Not really. The information thrown away during lossy compression is gone — there is no 'undo' button. You can re-save at higher quality, but that just creates a larger file with the same artifacts. Always start from the original.
Does compression remove EXIF metadata?
It depends on the tool. EllyTools strips EXIF by default, which is generally what you want before publishing photos online — EXIF can include GPS coordinates, camera serial number, and capture time. If you need to preserve metadata for archival reasons, keep an uncompressed master.
What's the smallest file I can get without visible quality loss?
For typical web photos, AVIF at quality 50–60 is currently the smallest 'invisibly compressed' format — often 5–10× smaller than the original JPEG. WebP at quality 75 is the practical sweet spot today because of broader browser support.
Are my images uploaded to a server for compression?
No. EllyTools compresses everything locally in your browser. Your images never leave your device, so even very sensitive photos can be compressed safely.