What does image compression actually do?
A digital image is a grid of pixels, and each pixel normally takes 3 bytes: one each for red, green and blue (4 with transparency). Multiply width by height by 3 and you get the uncompressed size: a 1920 × 1080 screenshot is 6.2 MB of raw data, a 4032 × 3024 phone photo 36.6 MB. Compression finds a shorter way to describe that grid, by spotting repetition, predicting each pixel from its neighbors, or rounding away detail that does not matter, and the decoder rebuilds the pixels when the image is opened. There are two families, and the difference is whether the rebuilt pixels are identical to the originals.
What is lossless compression?
Lossless compression rebuilds every pixel exactly, bit for bit, like a ZIP file for images. It exploits redundancy: a row of 500 identical white pixels can be stored as “white × 500”, and a smooth area as small differences from a predicted value. That makes it excellent for screenshots, logos and diagrams, which are full of flat color, and poor for photos, whose sensor noise and texture look random to the compressor. PNG, GIF, lossless WebP and TIFF (with LZW or ZIP) are lossless. Typical ratios: from 10:1 to over 100:1 on flat graphics, only about 2:1 on photos.
What is lossy compression?
Lossy compression accepts small, controlled errors in exchange for much smaller files. It throws away what human vision is least sensitive to: very fine texture, color resolution (we see brightness detail far better than color detail), and tiny variations inside smooth areas. The quality setting decides how much goes. At quality 75–85 a photo typically compresses 15:1 to 40:1 depending on the format, with no difference visible at normal size; at low settings the errors become artifacts such as blocks, halos and banding. JPEG, lossy WebP, AVIF and HEIC are lossy. The trade-off is covered in lossy vs lossless compression.
How do JPEG, PNG, WebP and AVIF compress images?
JPEG: color conversion, DCT and quantization
JPEG first converts RGB into one brightness channel and two color channels (YCbCr), and usually stores the color channels at half width and half height (4:2:0 chroma subsampling), which halves the raw data before anything else happens. It then cuts the image into 8 × 8 pixel blocks and runs a discrete cosine transform (DCT) on each, turning 64 pixel values into 64 frequency coefficients, from the block's average tone to its finest detail. Quantization, the lossy step, divides each coefficient by a value from a quantization table and rounds the result: fine-detail coefficients get large divisors and mostly become zero. Huffman coding then packs those zeros very efficiently. The quality setting scales the tables, as explained in JPEG quality settings explained.
PNG: filters plus DEFLATE
PNG is always lossless. For each row it applies a filter that predicts every pixel from its neighbors (left, above, their average, or the Paeth predictor) and stores only the difference, which is zero or close to it in flat areas. The filtered data then goes through DEFLATE, the same LZ77-plus-Huffman algorithm used by ZIP. PNG can also store a palette: up to 256 colors, with each pixel saved as a one-byte index instead of three or four bytes. Reducing an image to a palette is the lossy step that most “PNG compressors” perform before saving a perfectly lossless PNG of the result. More in why is my PNG file so large.
WebP: block prediction, or a separate lossless mode
Lossy WebP comes from the VP8 video codec. It predicts each block from pixels already decoded above and to the left, transforms only the prediction error, quantizes it and codes it with an arithmetic coder, which packs data tighter than JPEG's Huffman coding. It always uses 4:2:0 color. Google measures lossy WebP at about 30% smaller than JPEG on average without loss of visual quality. Lossless WebP is a separate mode with its own tricks (pixel prediction, a color cache, references back to earlier runs of pixels) and comes out about 26% smaller than PNG. Both modes support transparency.
AVIF: a video codec's still frame
AVIF stores a single AV1 video keyframe. It follows the same predict, transform and quantize idea as WebP, but with block sizes from 4 × 4 up to 128 × 128 pixels, far more prediction directions, and optional film-grain synthesis that recreates noise instead of storing it. The result is typically around half the size of a JPEG at similar visual quality, at the cost of much slower encoding. It also handles 10- and 12-bit color and HDR.
Why do photos and screenshots compress so differently?
A photo is made of noise, texture and gentle gradients. Lossless compressors find almost no exact repetition in it, so a photo saved as PNG stays huge, while lossy compressors thrive: they discard the noise nobody can see. A screenshot is the opposite. Large flat areas and repeated letter shapes compress superbly without loss, but the sharp edges of text are exactly the high-frequency detail that lossy formats round away, which leaves halos around letters. That is why the same screenshot can be both larger and uglier as a JPEG than as an optimized PNG, and why a phone photo can be about ten times larger as a PNG than as a JPEG.
Typical sizes and ratios (real files vary with detail, noise and encoder)
| Image | Uncompressed | Lossless (PNG) | Lossy (JPEG, quality 80) | Lossy (WebP, quality 80) |
|---|---|---|---|---|
| Phone photo, 4032 × 3024 | 36.6 MB | 15–25 MB (about 2:1) | 1.6–2.2 MB (about 20:1) | 1.1–1.6 MB (about 27:1) |
| Web photo, 1600 × 1200 | 5.8 MB | 2.5–4 MB (about 2:1) | 280–360 KB (about 18:1) | 180–250 KB (about 27:1) |
| Screenshot, 1920 × 1080 | 6.2 MB | 150–500 KB (about 20:1) | Similar to PNG, with halos around text | 100–350 KB lossless (about 30:1) |
| Flat logo with transparency, 800 × 800 | 2.6 MB | 10–40 KB with a 256-color palette (about 100:1) | No transparency | 8–30 KB lossless (about 130:1) |
The ratio shows how hard the compressor is working, but the absolute size is what a web page pays for: a 1600 px photo at 200 KB loads fast whatever ratio produced it. Reducing pixel dimensions first is what turns a 20:1 photo into a light page; see how to prepare images for the web.
How do you compress an image in practice?
- Open the image compressor in any browser, on a computer or a phone. Nothing is uploaded: compression runs on your device.
- Drop one or more images: JPG, PNG and WebP, or other formats such as HEIC (in Safari), BMP, AVIF or TIFF, which come out as JPG, or PNG when they have transparency.
- Keep the output on Same as original, or pick WebP for the smallest files on a website.
- Set Quality to 75–85 for photos, or switch to Target size and type a maximum in KB.
- Download the result and compare it with the original at normal size.