How image compression actually works (in 5 minutes)
JPEG, WebP, AVIF — what they do, what they trade off, and how to pick the right encoder for the job.
Image compression is a solved problem in principle, but choosing the wrong format or quality setting can waste bandwidth, slow down your site, or produce visible artefacts. Here is a practical guide to how the major formats work and when to use each one.
Lossy vs lossless
Every image format falls into one of two categories. Lossless formats preserve every pixel of the original — the decoded image is bit-for-bit identical to the source. Lossy formats discard information that the human eye is less sensitive to, achieving much smaller file sizes at the cost of some fidelity.
Which one you choose depends on the use case. Photographs and gradients tolerate lossy compression well because the artefacts are hard to spot at normal viewing sizes. Screenshots, text, logos, and graphics with sharp edges need lossless encoding to stay crisp.
JPEG: the universal standard
JPEG has been the dominant image format on the web for three decades. It uses a lossy compression algorithm based on the discrete cosine transform — the same technique used in video codecs. The encoder divides the image into 8x8 pixel blocks, transforms each block into frequency space, and discards high-frequency information that the human eye perceives less acutely.
Strengths: Universal browser support, excellent compression for photographs, adjustable quality.
Weaknesses: No transparency support, visible block artefacts at low quality, poor compression for text and graphics.
Best for: Photographs, complex gradients, social media images, any situation where universal compatibility matters more than file size.
PNG: precision and transparency
PNG was designed as a patent-free replacement for GIF. It uses lossless Deflate compression — the same algorithm behind ZIP files — with a pre-processing step that filters each row of pixels to make it more compressible. PNG supports full alpha channel transparency, gamma correction, and embedded colour profiles.
Strengths: Lossless, transparency support, excellent for text and graphics, widely supported.
Weaknesses: Large file sizes for photographs, no multi-image or animation support (use APNG or GIF instead).
Best for: Logos, screenshots, UI elements, images with text, graphics with transparency.
WebP: Google's modern format
WebP was developed by Google as a web-focused replacement for both JPEG and PNG. It supports lossy compression (based on VP8 video codec prediction) and lossless compression (using a different algorithm with spatial prediction and colour cache). On average, lossy WebP is 25-35% smaller than JPEG at the same quality level.
Strengths: Smaller than JPEG and PNG, supports transparency and animation, near-universal browser support (97%+).
Weaknesses: Slightly slower to encode than JPEG, not supported by some legacy tools and CMS platforms.
Best for: Web images where file size matters more than universal compatibility. Modern websites should default to WebP with a JPEG fallback.
AVIF: the next generation
AVIF uses the AV1 codec developed by the Alliance for Open Media — the same codec Netflix and YouTube use for video streaming. It achieves 30-50% better compression than WebP at the same quality level, especially for photographic content. AVIF also supports HDR, wide colour gamut, 10/12-bit depth, and lossless compression.
Strengths: Best compression ratios, HDR support, free and open standard, transparency support.
Weaknesses: Slower encoding (especially at higher quality settings), lower browser support (~92%), larger decoder complexity.
Best for: Photographs where file size is critical, HDR content, future-proofing your image pipeline.
How to choose
Here is a simple decision tree: if you need transparency, use PNG (or WebP with fallback). If the image is a photograph, use JPEG, WebP, or AVIF — in order of decreasing file size and increasing encoding time. If the image has sharp edges or text, stick with PNG. For maximum compatibility, serve WebP with a JPEG fallback using the <picture> element.
Most importantly: do not manually optimise every image. Use our compressor's Auto mode, which picks the right format and quality for each file individually. It handles the decision so you do not have to.