Image Compression Techniques: Lossy, Lossless, and Format Comparison

Images dominate internet bandwidth — roughly 40–60% of the average web page by weight. A page that loads 4MB of unoptimized images instead of 400KB of well-compressed ones costs mobile users real data, slows down rendering, and hurts search ranking.

Good compression is never just "smaller is better." It is the point where quality is indistinguishable from the original at the intended viewing size, and every byte beyond that is waste.

Lossless compression preserves every pixel exactly. Decompressing a lossless image returns a byte-for-byte identical copy of the input. The savings come from finding patterns — repeated regions, predictable gradients, color palettes — and encoding them compactly.

PNG (Portable Network Graphics) is the dominant lossless format for web use. It combines filtering (predicting each pixel from its neighbors) with DEFLATE compression. PNG excels on images with sharp edges, solid colors, or text — screenshots, icons, diagrams. It is a poor choice for photographs because natural photos lack the structure PNG exploits.

Lossy compression discards visual information the human eye is less sensitive to, achieving compression ratios 5–20× higher than lossless. The catch is that decompression never perfectly reconstructs the original — it is an approximation.

JPEG (Joint Photographic Experts Group) is the classic lossy format. It converts an image into blocks, applies the discrete cosine transform (DCT), quantizes the high-frequency coefficients (where the eye is least sensitive), and entropy-codes the result. Quality settings (typically 1–100) control how aggressively coefficients are quantized.

WebP, developed by Google and published in 2010, supports both lossy and lossless modes. Lossy WebP is typically 25–35% smaller than JPEG at equivalent visual quality. It also supports transparency (alpha channel), which JPEG cannot handle natively.

AVIF (AV1 Image File Format), standardized in 2019, is the current state of the art. It is based on the AV1 video codec and achieves 30–50% smaller files than JPEG at the same quality, with full alpha and HDR support. Browser support reached mainstream availability around 2023.

No single format is universally best. Match format to content and distribution:

• Photographs, web delivery: AVIF (if clients support it) > WebP > JPEG
• Screenshots, diagrams, icons: PNG (lossless) or WebP lossless
• Animated images: WebP > GIF for both size and quality
• Print: TIFF or PNG (lossless, high bit depth)
• Simple monochrome shapes: SVG (vector, resolution-independent)

JPEG quality 75–85 is virtually indistinguishable from the original in side-by-side viewing for most photographs. Below 60, artifacts become visible: blocking on smooth gradients, mosquito noise around edges, color bleeding.

Save-with-quality-N is a starting point, not a finishing one. Perceptual tools like Butteraugli (Google) and SSIMULACRA2 measure visual difference in a way that correlates with human judgment and can automatically find the highest quality setting that keeps a difference imperceptible.

Serving a single image at full resolution to all devices wastes bandwidth on smaller screens. The HTML srcset and <picture> elements let you provide multiple resolutions, and the browser picks the best for the viewport.

Modern CDNs can perform format negotiation automatically — serving AVIF to capable browsers, WebP to older ones, and JPEG as a fallback. Combined with responsive sizing, this typically reduces image bytes shipped by 40–70% without any perceivable quality difference.