When you open a JPEG image on a slow connection, you might notice it either loads top-to-bottom like a blind being slowly raised, or it gradually appears across the whole image getting clearer and clearer. These are the two encoding modes of JPEG: baseline and progressive. Understanding the difference helps you make better decisions for web performance and user experience.

What Is Baseline JPEG?

Baseline JPEG (also called sequential JPEG) stores image data from top to bottom, left to right — just like reading a book. When the browser starts downloading a baseline JPEG, it renders the image from the top down. You see the top portion of the image first, and it fills in downward as bytes arrive.

This is the default encoding for most JPEG files created by cameras, phones, and image editors. If you've ever seen a webpage with images loading as strips from top to bottom, those were baseline JPEGs loading over a slow connection.

What Is Progressive JPEG?

Progressive JPEG stores image data in multiple passes (scans). The first scan contains a low-quality version of the entire image — the full dimensions, but blurry. Subsequent scans add more detail until the final scan delivers full quality.

The visual effect: the entire image appears immediately (blurry), then progressively sharpens as more data arrives. This is the "dissolve-in" effect you see on many websites with optimized images.

Progressive vs. Baseline JPEG: Which Looks Better?

From a pure visual standpoint, progressive JPEG is considered to provide a better user experience during loading:

Progressive: The whole image is visible immediately (blurry). Users can see the general content while it loads. This feels faster even if the total load time is identical.
Baseline: The top portion is crisp, but the rest of the image is absent. On slow connections, this can feel like the page is "broken" until the image finishes loading.

Studies on perceived performance consistently show users prefer progressive loading for large images. It's a key reason why many web performance guidelines recommend progressive JPEG for images above a certain size.

Progressive vs. Baseline JPEG: File Size Difference

There is a slight file size difference between progressive and baseline JPEG:

Small images (under ~10 KB): Baseline is typically smaller. The overhead of progressive encoding isn't worth it for tiny images.
Medium images (10 KB – 30 KB): Results vary. Often similar size.
Large images (above 30 KB): Progressive JPEG is often 2–10% smaller than baseline due to how the DCT coefficients are organized across scans.

For most web images (100 KB – 1 MB), progressive JPEG is marginally smaller or the same size as baseline. The file size advantage is not the primary reason to use progressive — the loading experience is.

When to Use Progressive JPEG

Use progressive JPEG when:

Large images(hero images, full-screen backgrounds, large product photos): The progressive loading experience is most noticeable and beneficial for images that take >200ms to load.
Images above 10 KB: Below this threshold, the overhead of progressive encoding outweighs the benefits.
Web performance is a priority: Progressive JPEGs contribute to better perceived performance metrics.

When to Use Baseline JPEG

Use baseline JPEG when:

Tiny images or thumbnails: The progressive overhead makes baseline smaller and simpler for images under 10 KB.
Software compatibility: Some older image processing software and certain specialized tools don't handle progressive JPEGs correctly. If you're exporting for a specific system, check its requirements.
Print production: Print workflows often prefer baseline JPEG. The loading experience doesn't matter for print — only final quality does.

How to Convert Baseline to Progressive JPEG

Picovert's image compressor can output optimized JPEGs. Many image processing pipelines (like sharp, libjpeg-turbo, imagemagick) support specifying progressive encoding when saving JPEGs.

In most command-line tools: the flag is typically "-progressive" (ImageMagick, libjpeg) or an option like "interlace: 'Line'" (sharp/Node.js). Most GUI image editors (Photoshop, GIMP, Affinity Photo) offer "Save for Web" dialogs with a progressive checkbox.

Progressive JPEG and Web Performance

Progressive JPEG affects several web performance metrics:

Largest Contentful Paint (LCP): Progressive JPEGs can improve perceived LCP because the full image dimensions are known immediately, and a blurry version renders quickly.
Cumulative Layout Shift (CLS): No direct impact — CLS is about layout shifts, not image quality.
User experience: Better perceived performance on slow connections.

Modern Alternatives to Progressive JPEG

In 2026, there are alternative approaches that go beyond progressive JPEG:

WebP: Supports a similar progressive-like loading and is 25–35% smaller than JPEG. Convert your JPEGs to WebP for best web performance.
AVIF: Even better compression than WebP with progressive support. Best for cutting-edge optimization.
Blur-up technique: Used by Next.js, Gatsby, and other frameworks — show a tiny blurry placeholder while the full image loads, regardless of JPEG type.

For web use, serving WebP or AVIF instead of JPEG often delivers better results than optimizing JPEG encoding type. Use Picovert's compressor to optimize your images and convert between formats for the best web performance.