How Image Compression Works: Formats, Quality, and Performance

You upload a 4.2 MB product photo to your e-commerce site. The page takes 6.8 seconds to load on a 3G connection. Google's Core Web Vitals flag it as poor LCP. One customer in three has already bounced. The fix is straightforward — compress the image to under 200 KB — but choosing the right format and quality setting requires understanding how image compression actually works.

How Lossy Compression Removes Visual Data

Every digital image is a grid of pixels, each storing color values. A 3000×2000 photo at 24-bit color holds 18 million pixels × 3 bytes = 54 MB of raw data. Compression algorithms reduce this by exploiting two facts: adjacent pixels are often similar (spatial redundancy), and the human eye is less sensitive to certain details (perceptual redundancy).

JPEG (Joint Photographic Experts Group, 1992) splits the image into 8×8 pixel blocks, converts each to the frequency domain using a Discrete Cosine Transform (DCT), and discards high-frequency coefficients — the fine detail your eye is least likely to notice. At quality 80, this typically achieves 10:1 compression with minimal visible degradation. At quality 30, artifacts appear as 8×8 block boundaries and color banding.

WebP (Google, 2010) uses block prediction similar to VP8 video encoding. It predicts each block from its neighbors and encodes only the difference. Google's benchmarks show WebP lossy images are 25-34% smaller than equivalent-quality JPEG files. WebP also supports transparency (alpha channel) in lossy mode, which JPEG cannot.

Lossless vs Lossy: When Each Matters

Lossless compression (PNG, WebP lossless, AVIF lossless) preserves every pixel exactly. It works by finding patterns — repeated color sequences, predictable gradients — and encoding them efficiently. PNG uses DEFLATE (the same algorithm behind gzip), achieving 2:1 to 5:1 compression on typical images.

Use lossless when pixel accuracy matters: screenshots with text, UI assets, medical imaging, or any image that will be edited further. Use lossy for photographs, marketing banners, and any visual content where a 70% file size reduction outweighs imperceptible quality loss.

• PNG — lossless, supports transparency, ideal for graphics with flat colors and sharp edges. Typical photo: 3-8 MB.
• JPEG — lossy only, no transparency, best for photographs. Same photo at quality 80: 200-600 KB.
• WebP — both lossy and lossless, supports transparency and animation. Same photo lossy: 150-400 KB. Supported by 97% of browsers (Can I Use, 2026).
• AVIF — next-gen format based on AV1 video codec. 20% smaller than WebP but slower to encode. Browser support at 92% and growing.

The Quality Slider: What the Numbers Mean

When you set JPEG quality to 75, you are not keeping 75% of the image data. The number controls the quantization table — how aggressively the encoder rounds DCT coefficients. The relationship between quality and file size is non-linear:

• Quality 100 → 95 — 40-60% file size reduction, virtually no visible change. This is the biggest win.
• Quality 95 → 75 — another 50-70% reduction. Differences visible only at pixel-level zoom.
• Quality 75 → 50 — 30-50% reduction. Artifacts start appearing on gradients and text.
• Below 50 — diminishing returns. Heavy blocking, color shifts, and ringing artifacts around edges.

For web use, the sweet spot is 70-85 for JPEG and 75-85 for WebP. Google PageSpeed Insights recommends targeting under 100 KB for hero images on mobile.

Image Compression and Web Performance

Images account for an average of 42% of total page weight according to the HTTP Archive (2025). Google's Largest Contentful Paint (LCP) metric — a Core Web Vital — directly measures how fast the biggest visible element loads, and that element is usually an image.

The performance impact is measurable. Shopify found that a 1-second improvement in LCP correlated with a 3.2% increase in conversion rate. Etsy reported that adding 160 KB to a page on mobile caused a 12% increase in bounce rate.

Beyond compression, use srcset and sizes attributes to serve appropriately sized images. A 3000px-wide hero image on a 375px mobile screen wastes 87% of downloaded pixels. Combine responsive images with format negotiation via the <picture> element to serve WebP where supported and JPEG as fallback.

Common Compression Mistakes

• Re-compressing already-compressed JPEGs — each round of lossy compression accumulates artifacts. If you need to edit, work from the original or a lossless format.
• Using PNG for photographs — a 3000×2000 photo as PNG can be 8-12 MB. The same image as WebP quality 80 is under 400 KB with no visible difference.
• Ignoring EXIF metadata — camera EXIF data (GPS coordinates, camera model, timestamps) can add 10-50 KB and may leak private location data. Strip it before publishing.
• Setting quality to 100 — JPEG quality 100 is not uncompressed. It still applies DCT, but with minimal quantization. The file is 5-10× larger than quality 85 with no perceptible benefit.

Key Takeaways

• WebP lossy offers 25-34% better compression than JPEG at equivalent quality, with 97% browser support.
• The quality 95→75 range delivers the best size-to-quality ratio for web images.
• Images are 42% of average page weight — compressing them is the single highest-impact performance optimization.
• Never re-compress a lossy image; always work from the original source file.
• Use responsive images (srcset) alongside compression to avoid serving oversized assets on mobile.

Ready to optimize your images? Use our Image Compressor to reduce file size with adjustable quality and WebP/JPEG output — entirely in your browser, no upload required. For embedding small images directly in code, check out our guide to Base64 encoding.