When you export a JPG, there’s sometimes a checkbox labeled “Progressive”. It’s easy to ignore, but it changes how the image loads, and in many cases it quietly makes your files a little smaller.
Baseline JPEG
A baseline JPEG is stored and loaded in a single pass from top to bottom. On a slow connection, you watch the image appear in strips, like a curtain being drawn. Until the whole thing arrives, the bottom is empty.
Progressive JPEG
A progressive JPEG is stored as several passes of increasing detail. The browser can show a rough, blurry version of the whole image quickly, then sharpen it as more data arrives. Visitors see the entire picture right away, just at low quality at first.
Which looks better to the visitor?
On a fast connection, you won’t notice either. On slow mobile data, progressive gives a more reassuring experience, since the page doesn’t have empty gaps. Remember that Google measures when the largest element appears, so a quick blurry preview of a hero image can help perceived speed. See improving LCP with images.
File size
For larger images, progressive JPEGs are often slightly smaller than baseline versions, thanks to a different way of organizing the data. For very small images, such as tiny thumbnails or icons, the progressive version may actually be a bit bigger. The difference is typically modest, a few percent, but it’s free.
Compatibility
All modern browsers support progressive JPEGs. Some very old software, some email clients and embedded systems handle them poorly. If you need to be safe with unusual systems, baseline is the universal choice. For websites, progressive is generally fine.
Decoding cost
Progressive images need more processing to decode, because the browser may refresh the display multiple times. On modern devices this isn’t noticeable, but on very low-powered hardware it can be.
Is the quality different?
No. For the same quality setting, a progressive and baseline JPEG contain the same image data. The only difference is the ordering. Quality choices are covered in the JPG quality guide.
How to create one
- Photoshop: in Save for Web or Export As, choose Progressive.
- GIMP: in the JPEG export dialog’s Advanced options, enable progressive.
- ImageMagick:
-interlace Plane. - Pillow:
img.save("out.jpg", progressive=True, optimize=True).
Should you bother?
If you publish photos on the web, yes. It’s a free tweak that can help perceived loading and save a little data. But it’s a small optimization. The big wins are still resizing to the right dimensions, choosing a sensible quality and considering WebP. See the website image optimization checklist and converting to WebP.
Format note
This concept applies to JPG only. PNG has a similar feature called interlacing, which usually makes files larger and is rarely worth enabling.
Resize your photos first with our free image resizer, then use progressive export for the final save if your editor offers it.