What the quality slider is really doing, and the one step that saves more space than any of it.
Everyone knows that saving a JPEG at a lower quality makes the file smaller and the picture worse. Far fewer people know what is being thrown away, which is a shame, because once you do, a lot of practical decisions become obvious: when a screenshot should never be a JPEG, why re-saving an image repeatedly ruins it, and why resizing before compressing beats every other trick.
"Making an image smaller" means two unrelated things, and confusing them is the source of most bad outcomes.
Fewer pixels — resizing. A 4000×3000 photo has twelve million pixels. Displayed on a web page at 800 pixels wide, all but about 4% of them are thrown away by the browser anyway. Resizing discards data you were never going to see.
Fewer bits per pixel — compression. Keeping the same pixel dimensions but storing them more cheaply, either by finding redundancy (lossless) or by discarding detail the eye is bad at noticing (lossy).
File size scales with the square of the dimensions. Halving width and height quarters the pixel count. That is why the first question should always be "how big does this actually need to be?" rather than "how far can I drag the quality slider?"
PNG is the familiar lossless format. It works in two stages. First it filters each row of pixels, typically by storing the difference between each pixel and its neighbour to the left or above rather than the pixel's absolute value. In a smooth gradient, those differences are mostly zero or close to it. Then it runs DEFLATE — the same algorithm as ZIP — over the filtered data, which is very good at squeezing repetitive, low-entropy input.
This explains PNG's split personality. A screenshot of a spreadsheet compresses beautifully, because it is full of flat colour, repeated glyphs and hard edges: the filter output is nearly all zeros. A photograph of foliage compresses terribly, because every pixel genuinely differs from its neighbours and there is no redundancy to find. A photo saved as PNG is frequently five to ten times larger than the same photo as a good-quality JPEG, with no visible benefit.
The key property: lossless means bit-exact. Decode a PNG and you get back precisely the pixels that went in, every time, no matter how often you re-save it.
JPEG takes the opposite approach. It exploits specific, well-documented weaknesses in human vision. There are three main stages.
The image is converted from RGB into YCbCr: one channel for luminance (Y, effectively brightness) and two for chrominance (Cb and Cr, the colour information). This matters because human vision is far sharper for brightness than for colour — we have many more rod cells than colour-sensitive cones, and the visual system treats fine luminance detail as important while treating fine colour detail as noise.
So JPEG throws colour resolution away immediately, a step called chroma subsampling. In the common 4:2:0 mode, the two colour channels are stored at half resolution horizontally and vertically — one colour sample for every four pixels. Before any of the clever mathematics happens, the file is already down to half its size, and on a photograph you genuinely cannot see it.
You can see it on saturated edges, which is why red text on a dark background looks smeared and fringed in a JPEG. There is no brightness edge for the sharp channel to preserve — the edge exists only in colour, and colour is exactly what was thrown away.
Each channel is cut into 8×8 blocks, and each block goes through a discrete cosine transform. This does not compress anything; it re-expresses those 64 pixel values as 64 coefficients describing patterns from "flat average colour" up through progressively finer ripples to "alternating checkerboard".
The point is that real images are overwhelmingly made of the low-frequency patterns. Most 8×8 blocks of a photograph are close to flat or a smooth gradient, so after the transform the energy piles up in a handful of coefficients and the rest are near zero.
Each of the 64 coefficients is divided by a value from a quantisation table and rounded to a whole number. Coefficients for fine detail get large divisors, so they usually round to zero and vanish. Coefficients for coarse structure get small divisors and survive nearly intact.
The quality slider is a multiplier on that table. Quality 90 uses gentle divisors and discards little. Quality 40 uses aggressive ones and wipes out most of the fine detail in every block. That is the entire mechanism — everything else in JPEG is lossless bookkeeping around this one rounding step.
Once a coefficient has been rounded to zero, it is gone. There is no record of what it was.
Because quantisation rounds, and because decoding then re-encoding does not reproduce the same coefficients exactly, every save cycle discards a little more. Open a JPEG, crop it, save it, open it again next week, adjust it, save it again — each round trip compounds. After a dozen generations, a photo that started clean is visibly mushy, with blocky skies and haloed edges.
This is why you keep an original. Edit from the source file each time and export a fresh JPEG, rather than repeatedly editing the export. The rule is simple: lossy formats are a delivery format, not a working format.
WebP and AVIF use the same underlying idea — transform, quantise, discard — with better tools. Variable block sizes let them use large blocks on flat regions and small ones where detail is dense. Smarter entropy coding squeezes more out of what remains. Intra-frame prediction, borrowed from video codecs, predicts each block from its neighbours and stores only the error.
In practice WebP tends to land 25–35% smaller than JPEG at matched visual quality, and AVIF better still. WebP also offers a lossless mode that usually beats PNG, and it supports transparency, which JPEG never has. Browser support for WebP is now effectively universal.
| Content | Use | Why |
|---|---|---|
| Photographs | JPEG q75–85, or WebP | Lossy artefacts hide in natural texture |
| Screenshots, UI, text | PNG or lossless WebP | Hard edges and flat colour; JPEG rings badly on text |
| Logos, line art, icons | SVG if possible, else PNG | Vectors scale perfectly at any size |
| Anything needing transparency | PNG or WebP | JPEG has no alpha channel |
| Images you will keep editing | PNG or the original raw file | Avoids generation loss |
Photographs carry EXIF data: camera model, settings, timestamps, and frequently GPS coordinates. Compression tools vary in whether they preserve or strip it. Stripping usually saves a few kilobytes and removes location information you may not want to publish — but it also discards the orientation flag, which is why a stripped photo occasionally appears rotated. If a picture comes out sideways after compressing, that flag is almost always the reason.