Progressive JPEG Explained: Why Some Images Load in Stages

2026-09-17

Open a page full of images and watch how they load. Some paint top to bottom like a curtain; others appear as a blurry mass that sharpens into focus. The second kind is a progressive JPEG, the first is baseline. For anyone running a website, the choice affects perceived speed and Core Web Vitals.

Baseline vs progressive

A baseline JPEG encodes and decodes top to bottom in one pass: the image draws as the file streams in. A progressive JPEG splits the data into multiple scans. The first scan stores a low-resolution outline; later scans add detail. The decoder shows the blurry version first, then sharpens it.

• Baseline: renders row by row, fine for small, simple images
• Progressive: multiple scans, outline first then detail, good for photos and article images
• Quality at the same file size is essentially equal; only decode order differs

Three benefits of progressive JPEG

• Faster perceived load: users see the overall shape instead of blank space
• Less layout shift: the image claims its space early, which stabilizes CLS
• Better on slow networks: content becomes visible sooner even at low bandwidth

When to choose each

Photos, large images, and article heroes favor progressive. Small icons, flat color blocks, and UI elements that need the fastest first frame are fine as baseline, where progressive only adds decode overhead. Older browsers handle progressive slightly worse, but support is now near-universal.

How to convert an image to progressive

Most image tools expose the option: Photoshop has a Progressive checkbox on save; ImageMagick uses -interlace Plane; online tools like Squoosh include a progressive toggle. The conversion barely changes file size; it only reorders the data.

FAQ