Two ways to transmit the same image
A JPG can be saved in two ways — the image content is identical in the end, only the order of the data differs:
- Baseline (standard): the image is transmitted top to bottom. On a slow connection you first see the upper half sharp, the rest still empty — the image "grows" from the top.
- Progressive: first the whole image arrives at a coarse, blurry resolution, then refines over several passes until sharp. You see the complete subject immediately, just mushy at first.
Why progressive often feels better
The decisive advantage is psychological: a complete coarse image feels faster than a half-loaded sharp line. The user recognizes the subject immediately and waits more patiently for the sharpness. On slow mobile connections this effect is noticeable — perceived load time drops even though the actual time stays the same. For real load-time optimization there is a dedicated post on speeding up page load.
And the file size?
A nice side effect: for larger photos, progressive JPEGs are frequently slightly smaller than baseline versions, because progressive encoding bundles the image data differently and partly more efficiently. The difference is usually in the low single-digit percent range — no quantum leap, but taken along for free. For very small images (icons, mini thumbnails) progressive can even be marginally larger, because the management overhead weighs in.
When progressive, when baseline?
| Image type | Recommendation |
|---|---|
| Large web photos, hero images | progressive |
| Photos in articles, galleries | progressive |
| Small thumbnails, icons | baseline (or doesn't matter) |
| Very small UI graphics | baseline |
The good news: you rarely have to decide actively. Many optimization tools and CDNs pick the right variant automatically by image size. And since every browser displays both variants, there's no compatibility risk — the choice is pure optimization, no gamble.
Relationship to image quality
Important for context: progressive vs. baseline has nothing to do with image quality. The quality level (and thus the typical JPEG artifacts) is chosen separately. A progressive JPG at quality 60 has the same blocks as a baseline JPG at quality 60 — it just shows them in a different order. Where these artifacts come from and how to avoid them is in JPEG artifacts.
Frequently asked questions
What is a progressive JPEG?
A save variant of JPG where the whole image first appears coarse and blurry and then sharpens over several passes. The classic 'baseline' JPEG instead loads top to bottom, line by line. The image content is identical, only the order of data transfer differs.
Is a progressive JPEG smaller?
Often a little — for larger photos progressive JPEGs are usually slightly smaller than baseline because the encoding bundles data differently. For very small images it can be the reverse. The difference is usually in the low single-digit percent range.
Should I use progressive JPEGs?
For larger web photos usually yes: the user sees a complete (if coarse) image sooner instead of a half-loaded line, which feels faster. For very small images (icons, thumbnails) it brings nothing. Many optimization tools switch progressive on automatically as appropriate.
Do all browsers support progressive JPEGs?
Yes. Progressive JPEGs have been standard for decades and are displayed by every browser and image viewer. There's no compatibility risk — the choice is purely an optimization question.
Sources
MDN — JPEG image format · Cloudinary — Progressive JPEG (background).