A progressive JPEG appears as a rough full image first, then sharpens as more data downloads. A baseline JPEG often appears from top to bottom, or waits longer before showing a meaningful preview.
Both files can have the same final pixels. The difference is delivery order. Progressive encoding improves perceived load because the viewer sees the whole image area earlier.
If you are preparing large JPEGs for a site, convert candidates with the Progressive JPEG Converter and verify the result with the Progressive JPEG Checker.
Baseline vs progressive JPEG
| Encoding | First visible result | Data layout | Good fit |
|---|---|---|---|
| Baseline JPEG | top-to-bottom or delayed reveal | one main scan | small images, legacy pipelines |
| Progressive JPEG | low-detail full image, then refinement | multiple scans | large photos, heroes, editorial images |
JPEG stores image data as frequency information. A baseline file writes that data in a sequence the decoder usually renders in one pass. A progressive file splits the data into multiple scans, so the decoder can draw a coarse version before all detail has arrived.
The final image is still a JPEG. Progressive encoding does not add transparency, change the format, or remove the need for compression.
Perceived load matters
Blank image space feels slower than a rough preview because the page has not confirmed what belongs there. A progressive JPEG gives the user an early visual anchor.
This is most noticeable on:
- large hero photos
- article headers
- editorial image grids
- product photography
- pages viewed on weak mobile connections
It matters less for tiny thumbnails and icons. A 6 KB thumbnail may finish before the progressive structure provides any visible benefit.
What progressive JPEGs do not fix
Progressive encoding is not a replacement for image sizing. A 4000px hero image is still too large if the layout displays it at 1200px.
Before converting, check three things:
- Dimensions: resize oversized images to the largest rendered width needed.
- Quality: lower JPEG quality until artifacts become visible, then move back up.
- Format: use PNG or WebP when transparency is required, because JPEG cannot store alpha.
Progressive JPEGs help the loading sequence. They do not make a poorly sized file cheap.
Create a progressive JPEG
Most image exporters have a progressive option. The exact label varies: Progressive, Interlaced, or Interlace: Plane.
With ImageMagick, the command is:
magick input.jpg -interlace Plane -quality 82 output.jpgQuality around 75 to 85 is a reasonable starting range for photos. Lower values reduce bytes but can show block artifacts, banding, or smeared texture.
The browser-based route is to drop PNG, JPEG, or WebP images into the Progressive JPEG Converter, set quality and optional max width, then download progressive JPEG output.
Check whether a JPEG is progressive
Do not rely on the filename. A file named hero-progressive.jpg can still be baseline if an export pipeline rewrote it.
Reliable checks include:
identify -verbose image.jpg | grep Interlace- JPEG markers:
SOF0usually means baseline,SOF2means progressive - a throttled network test where the image appears rough before sharpening
- the Progressive JPEG Checker, which reads JPEG markers and scan count
The marker check is the most direct method because it reads the file structure instead of judging the visual load.
A site image workflow
Start with the large source photo and export only the size the page needs. For a 1440px hero slot, a 1600px or 1800px image may be enough depending on density and crop.
Then compress and encode it as progressive JPEG. Check the output marker, compare the visual result, and test the page with DevTools network throttling. If the image is the Largest Contentful Paint candidate, the earlier preview can make the page feel less empty while the final bytes arrive.
Use progressive JPEGs for large photographic images. Use correct dimensions and compression first.
