Progressive vs Baseline JPEG
A progressive JPEG loads in low-resolution layers that improve with each pass — the full image appears blurry then sharpens. A baseline JPEG loads top-to-bottom in a single pass.
Last updated
JPEGs come in two scan modes: baseline and progressive. The difference affects how the image loads and its file size, but not its final appearance.
Baseline JPEG
Loads from top to bottom in a single pass. Users see the top portion of the image while the rest loads — a horizontal line moves down as the image downloads. This is the default in most image editors.
Best for: Thumbnails, small images where load time doesn't matter
Progressive JPEG
Stores multiple "scans" at increasing quality levels. The browser renders the first scan (low resolution, full image), then progressively improves with each subsequent scan. Users see a blurry-but-complete image that sharpens as it loads.
Best for: Large images on websites where perceived load performance matters
File Size Comparison
Progressive JPEGs are typically 5–15% smaller than equivalent baseline JPEGs — a side benefit of the scan structure. For very small images (under 10 KB), baseline JPEGs may be smaller.
How to Create a Progressive JPEG
- Photoshop: File → Export → Export As → check "Progressive"
- GIMP: File → Export → in JPEG settings, check "Progressive"
- Squoosh (web): Under JPEG quality settings, toggle "Progressive"
- ImageMagick:
convert input.jpg -interlace Plane output-progressive.jpg
Browser Support
All modern browsers support progressive JPEG. Older browsers display progressive JPEGs but may show them in baseline order (top to bottom), losing the progressive rendering benefit.
Should You Use Progressive JPEG?
For images over 100 KB on a web page: yes, progressive JPEG improves perceived performance with a smaller file size as a bonus. For thumbnails or small icons: the benefit is negligible.