Image Compression Explained: Quality, File Size & Tradeoffs
Compression is the process of reducing the amount of data needed to store or transmit an image. Understanding the difference between lossy and lossless compression helps you make informed decisions about quality, file size, and which tool to use.
Lossless vs lossy compression
There are two fundamentally different approaches to image compression:
Lossless compression
Lossless compression reduces file size without discarding any image data. The original image can be perfectly reconstructed from the compressed file. PNG and GIF use lossless compression. WebP also offers a lossless mode.
The downside is that lossless compression achieves smaller savings than lossy methods — typically 20–50% for photographic content compared to 60–80% for lossy.
Lossy compression
Lossy compression permanently removes visual information that the algorithm considers imperceptible to the human eye. JPEG and WebP (lossy mode) use this approach.
The result is dramatically smaller files. A JPEG at 85% quality is typically 5–10× smaller than the same image as a lossless PNG, with very little perceptible difference for photographic content.
How JPEG compression works
JPEG compression works by dividing the image into small 8×8 pixel blocks, then applying the Discrete Cosine Transform (DCT) to convert spatial pixel data into frequency information. High-frequency details (fine textures, sharp edges) are then quantized — reduced to fewer values — according to the quality setting.
This is why JPEG artifacts appear as blocky patches or "ringing" around sharp edges: the 8×8 block boundaries become visible when compression is pushed too far. The eye is far more sensitive to luminance (brightness) than chrominance (color), so JPEG compresses color information more aggressively than brightness.
What the quality slider actually controls
When you move a quality slider from 1 to 100, you are adjusting the quantization tables that determine how aggressively each frequency is rounded. Higher quality = less rounding = more data retained = larger file.
Quality is not a linear scale. Moving from 95 to 100 nearly doubles the file size with almost no visible improvement. Moving from 80 to 70 produces a noticeable file size reduction with subtle quality loss. Moving below 50 starts producing obvious blocky artifacts in most images.
Recommended quality settings
Use for images that will be re-edited later, or hero images on high-visibility pages where any quality degradation is unacceptable. File sizes are still 30–50% smaller than PNG.
The sweet spot for most web use. Hero banners, product detail images, and portfolio photos look excellent. File sizes are well-controlled. Most users cannot distinguish this from the original.
Good for thumbnails, listing images, and social media previews. Noticeable artifacts may appear in smooth gradients or areas with fine text. File sizes are significantly reduced.
Only suitable for very small thumbnails or previews where size is the top priority and quality is secondary. Blocky artifacts will be visible, especially around edges and in gradients.
WebP compression vs JPEG
WebP's compression algorithm (based on VP8 for lossy, and an LZ77-based codec for lossless) is generally more efficient than JPEG. At equivalent visual quality, WebP produces files that are roughly 25–35% smaller.
This means a WebP image at quality 80% often looks similar to a JPEG at quality 85–90% while occupying less disk space. For new web projects targeting modern browsers, WebP is the better default for photographic content.
WebP also avoids the JPEG blocking artifact pattern. Compression artifacts in WebP tend to appear as subtle blurring rather than the hard-edged 8×8 blocks seen in heavily-compressed JPEGs.
Content type matters
The right compression setting depends on what the image actually contains:
- Photographs: Tolerate lossy compression well. The noise and texture in natural scenes masks artifacts. Quality 75–85% is typically fine.
- Text on images: Highly sensitive to JPEG artifacts. Use PNG or WebP lossless, or push quality above 90% if JPG is required.
- Flat-color graphics and illustrations: Use PNG or WebP lossless. Lossy compression introduces visible fringing around flat color boundaries.
- Screenshots of software UIs: Use PNG. Lossy compression visibly degrades UI text and crisp interface elements.
- Thumbnails: Use more aggressive compression (quality 60–75%). At small sizes, artifacts are less noticeable and smaller files load faster.
File size vs visual quality: a practical workflow
Rather than guessing a quality setting, use a visual comparison approach:
- Start at quality 85% for photographs (or 90% for graphics).
- Check whether the result looks acceptable at typical viewing sizes.
- If quality looks fine, try reducing to 80% and compare again.
- Stop when you notice quality degradation and use the previous setting.
- For thumbnails, you can usually go 10–15% lower than for full-size images.
A live side-by-side comparison tool is the most reliable way to make this decision. ImageLab's Image Compressor shows you the original and compressed result together so you can judge quality while watching the file size change.
Compression and privacy
Re-encoding an image through a lossy compressor strips most EXIF metadata as a side effect, since the image is reconstructed rather than copied byte-for-byte. However, this is not a reliable privacy technique because some encoders preserve metadata through the compression pipeline.
If you specifically need to remove GPS coordinates, camera identifiers, or other sensitive metadata, use a dedicated tool like ImageLab's Metadata Stripper, which explicitly removes all EXIF data before saving.