Progressive vs baseline JPEG

Both store the same compressed data with the same quantization and the same quality. What differs is the order it is written in.

A baseline JPEG stores the image as a single pass, block by block, left to right and top to bottom. A decoder receiving it can only draw what has arrived, which is why a slow-loading baseline image appears from the top down.

A progressive JPEG stores several passes over the whole image: the first carries only the coarsest information, and each subsequent one adds finer detail. A decoder can render a complete, blurry version as soon as the first pass arrives, then refine it.

The total bytes are nearly identical, so nothing is genuinely faster in the sense of finishing sooner. What changes is when something meaningful appears.

With a baseline image at 40% loaded, you have 40% of a picture and 60% empty space. With a progressive image at 40% loaded, you have the whole picture, slightly soft. For a photograph on a page someone is scrolling, the second is far more useful — the layout is complete and the content is recognisable.

This matters less than it used to on fast connections, where the whole file arrives in a fraction of a second either way. It still matters on poor mobile connections, which is where a good deal of real traffic lives.

Progressive encoding is usually slightly smaller — commonly 2–10% — because grouping similar coefficients across the whole image gives the entropy coder more to work with than processing blocks in spatial order does.

The exception is small files. Each pass carries its own headers, and on an image below roughly 10 KB that overhead outweighs the gain. For icons, thumbnails and tiny sprites, baseline produces the smaller file.

For photographs above about 10 KB on a web page, progressive is the better default: slightly smaller, and considerably better on a slow connection. For very small images, baseline.

This site does not let you choose, because a browser's canvas.toBlob gives no control over it — the encoder decides, and most browsers write baseline. A toggle here would be a control that does not affect the output, which is not something we are willing to ship. If you need progressive output specifically, a desktop encoder such as MozJPEG or ImageMagick exposes the option directly.