Image compression explainer.
See what image compression changes. Compare real JPEG, WebP, and PNG encodings, inspect details, and download the result.
Created by Navan SamiFewer bytes. What changes?
Lossless compression preserves pixels. Lossy compression trades some image detail for smaller files. Move the quality slider and inspect the result: edges, texture, and lettering often reveal changes first.
Your image stays in this browser. Preview limited to 1200 pixels per side; transparency is placed on white for a fair comparison.
Quality is an encoder setting, not a percentage of detail retained. Results vary with the browser and image.
Look for texture disappearing as quality drops.
Choose for the image.
Photographs and textured scenes can tolerate some loss. Sharp text and flat graphics can expose artifacts quickly. A smaller image dimension can save more than another drop in quality; this experiment holds the prepared dimensions fixed.
Re-encoding an already compressed file can make it larger. Here, the baseline is a fresh PNG of the prepared pixels so the comparison stays consistent.
How browser image encoding works ↗Does quality 50 mean the file will be half the size?
Make a prediction, then try the slider.