The Complete Guide to Image Compression for the Web
Image files account for 50–70% of the average web page's total byte weight. Slow image loading is the single biggest contributor to poor Core Web Vitals scores, high bounce rates, and lost SEO rankings. Image compression is the process of reducing an image's file size while preserving acceptable visual quality — and it is the highest-impact optimization available for web performance.
Understanding Image File Formats
Choosing the right format before compressing is as important as the compression itself. Different formats use fundamentally different encoding strategies and are suited for different content types.
| Format | Compression Type | Transparency | Best For | Typical Savings vs PNG |
|---|---|---|---|---|
| JPEG | Lossy (DCT) | No | Photographs, gradients | 60–80% |
| PNG-8 | Lossless | Yes (256 colors) | Icons, logos, flat art | Baseline |
| PNG-24 | Lossless | Yes (full alpha) | Screenshots, UI elements | Baseline |
| WebP | Lossy + Lossless | Yes (full alpha) | All web images | 25–60% |
| AVIF | Lossy + Lossless | Yes | High-quality photos | 40–70% |
| GIF | Lossless (LZW) | 1-bit | Simple animations only | N/A |
| SVG | Vector (text) | Yes | Logos, icons, illustrations | N/A (vector) |
How JPEG Compression Works
JPEG (Joint Photographic Experts Group) uses Discrete Cosine Transform (DCT) compression. The image is divided into 8×8 pixel blocks. Each block is transformed from the spatial domain into the frequency domain using DCT, producing coefficients that represent how much of each frequency component is present. High-frequency coefficients (fine detail, sharp edges) are quantized more aggressively based on the quality factor — effectively discarding detail the human visual system is least sensitive to. Huffman entropy coding then compresses the quantized coefficients further.
At quality 80, a JPEG encoder discards enough data to achieve 70–80% size reduction while maintaining SSIM (Structural Similarity Index) scores above 0.95 — meaning pixels are so close to the original that side-by-side comparison is difficult. Below quality 60, blocking artifacts and color banding become apparent, especially on skin tones and blue skies.
WebP: The Modern Web Standard
WebP was developed by Google in 2010 and uses a different encoding approach for lossy vs lossless content. For lossy encoding, WebP uses predictive coding based on the VP8 video codec — each block's colors are predicted from neighboring blocks and only residuals (differences) are encoded. This is more efficient than JPEG's block-by-block DCT approach and eliminates the hard block boundaries that cause JPEG artifacts.
For lossless content, WebP uses a palette transform, color space transform, subtract-green transform, and LZ77-based backward references — a different approach than PNG's DEFLATE. Benchmark studies show WebP lossless produces files 26% smaller than equivalent PNGs on average.
Why EXIF Metadata Matters for File Size
When you take a photo with a modern smartphone or digital camera, dozens of data fields are automatically embedded in the file: GPS coordinates, device manufacturer and model, lens specifications, camera settings (ISO, f-stop, shutter speed), date and time, orientation flags, color space profiles, and a full-resolution JPEG thumbnail. For a typical iPhone photo, this metadata adds 30–120KB to the file. When re-encoding through the browser Canvas API, all of this data is stripped automatically — providing both meaningful size savings and privacy protection.
Choosing the Right Quality Setting
- Quality 90–100 — Visually lossless. Use for product photos requiring print quality or enlargement. ~20–40% savings.
- Quality 80–89 — Recommended sweet spot. Indistinguishable from original on typical screens. 50–70% savings.
- Quality 70–79 — Slight detail reduction visible on close inspection. Good for thumbnails and previews. 60–80% savings.
- Quality 60–69 — Noticeable compression on smooth areas. Suitable for non-critical decorative images. 70–85% savings.
- Quality <60 — Visible artifacts. Only acceptable for avatars, icons, or images too small to see detail.
Image Optimization & Core Web Vitals
Google's Core Web Vitals — specifically Largest Contentful Paint (LCP) — are directly impacted by hero image file sizes. An uncompressed 3MB hero JPEG on a 4G connection adds ~2 seconds to LCP, which can drop a site from "Good" to "Poor". The same image at 200KB WebP loads in under 200ms. Google's Search Console, Lighthouse, and PageSpeed Insights all flag oversized images and recommend next-gen formats (WebP, AVIF). Systematic image compression is therefore both a UX improvement and an SEO ranking factor.