Progressive JPEGs: The Forgotten Optimization That Still Matters
Progressive JPEG encoding makes images appear to load faster by showing a low-quality preview first. It's been around for decades but remains underused in 2026.
Even with compression, dimensions, and a CDN all in order, a hero image can still feel sluggish on first paint. One of the cheapest fixes for this is also one of the oldest: encoding the JPEG in progressive mode. Progressive JPEGs display a blurry full-frame preview almost immediately, then refine in passes as more data arrives — unlike baseline JPEGs, which paint top-to-bottom as bytes stream in.
Baseline vs. Progressive JPEG: What's the Difference?
A baseline JPEG stores image data sequentially — top row to bottom row. The browser paints it from top to bottom as bytes arrive. On a slow connection, you see the top portion of the image while the bottom remains blank.
A progressive JPEG stores the image in multiple scans: the first scan contains a low-resolution version of the entire image; subsequent scans add progressively more detail. The browser can display the entire image at low quality almost immediately, then improve it as more data arrives.
Progressive JPEG is a perceptual optimisation, not a size optimisation. It doesn't change the final file size significantly, but it makes images feel faster by showing content earlier. For large above-fold images on slow connections, this is a meaningful UX improvement.
File Size: Does Progressive Encode Smaller?
For large images (above ~10 KB): progressive typically saves 2–8% file size compared to baseline at the same quality. For small images (thumbnails, icons): baseline is sometimes smaller. The crossover point is roughly 10 KB — below that, use baseline; above, progressive is usually worth it.
How to Create Progressive JPEGs
# ImageMagick — convert existing JPEG to progressive
convert input.jpg -interlace Plane output-progressive.jpg
# cjpeg (libjpeg) — encode with progressive flag
cjpeg -progressive -quality 80 -outfile output.jpg input.ppm
# jpegtran — losslessly re-encode existing JPEG as progressive (no quality change)
jpegtran -progressive -copy none input.jpg output.jpg
# Verify progressive encoding:
identify -verbose output.jpg | grep Interlace
# Should output: Interlace: Plane (for progressive)When Progressive JPEGs Are Worth It
- ●Hero images over 100 KB: High benefit — visible improvement on 3G and congested WiFi
- ●Article images in long-form content: Medium benefit — users scroll down as images load
- ●Product photos on e-commerce: Medium benefit — product discovery happens while detail loads
- ●Thumbnails under 20 KB: Low benefit — images load fast enough that the progressive effect isn't perceptible
Browser and CDN Support
All modern browsers support progressive JPEG decoding. However, not all CDNs preserve the interlace flag when transcoding. Cloudinary, Imgix, and Cloudflare Images all support progressive encoding as a parameter — check your CDN's documentation if images are being processed at delivery time.
The most impactful improvement for any hero image is still compression level and file size. Compress your images first, then consider progressive encoding for images that are still over 100 KB after compression.
Ready to try it?
All tools run entirely in your browser — no uploads, no account required.
Compress Image