Image Optimization, Web Performance October 13, 2020 by Anna Rud

The What, Why, and How of Progressive JPEG

Using progressive JPEGs is one more opportunity to improve web performance and create a more pleasant user experience on your website. If that’s something you’re looking for, this post is for you. 

What is progressive JPEG, how is it different from regular JPEG, why is it important, and how can you convert your JPEGs to the progressive version quickly and easily? Keep reading to find all the answers. 

What Is Progressive JPEG and How Is It Different From Regular JPEG?

A JPEG is one of the most common image formats for compressing digital images. There are two major versions of JPEG: baseline and progressive. They differ in the way the image is displayed to users. 

A regular user with a proper internet connection won’t spot the difference between the two versions. But if for some reason internet speeds are slow, it can take a while for an image to load fully, and that’s when the difference matters. 

The standard baseline JPEG format loads images from top to bottom and displays them line by line. This is what it looks like: 

Baseline JPEG loading process
Baseline JPEG loading

With baseline JPEG, the user will first see the top of the image, then another part, and so on until the entire image is downloaded. 

The progressive version of JPEG works differently: it displays a blurry preview of the image and then gradually increases the level of detail until the image reaches its original quality. This is what it looks like:

Progressive JPEG loading process
Progressive JPEG loading

This way, users can see the silhouettes of the objects right away, then the picture gets clearer as it loads.

Why Would You Need This?

Converting your JPEGs to the progressive version doesn’t make sense if your website contains only small images—chances are, they load fast without any additional effort. But if your website is full of large images, progressive JPEG might be quite helpful. How? It improves user experience on a website in two ways: 

Less waiting time for users

With baseline JPEG, your users see a large white space on the screen or a loading circle spinning until the image has finished loading. With progressive JPEG, visitors can already see the entire image at first sight. Although it’s blurry, they can still understand what’s in the image. 

Baseline vs. progressive JPEG
Baseline vs. Progressive

When the loading process reaches 50%, users will see the image clearly, with barely noticeable distortion, while baseline JPEG at 50% displays only half the picture. 

We can’t technically say that progressive JPEGs load faster than baseline—they load at the same speed. But even if the load speed is the same, the progressive version allows all your users, even with a poor connection, to see your content much faster. 

Faster load speed 

Generally, progressive JPEGs are 1-3% smaller in size than baseline, even though the image quality is the same. This saves bandwidth and storage, helping your website load faster. 

Given that mobile traffic will surpass desktop in 2020 and mobile internet can often be slow, even small improvements in load speed are important. 

How to Convert Your Images to Progressive JPEGs

Now that we know why turning your JPEGs into progressive is useful, let’s find out how to convert one using Uploadcare. All transformations at Uploadcare are done via CDN image operations.

To get started, you need to sign up for an Uploadcare account, create your first project from the dashboard, and start uploading your images.

Once an image is uploaded, you receive a CDN link with its own unique identifier (UUID). The link looks like this: 

https://ucarecdn.com/4a957796-cb22-4e3c-8cc3-61106f65ad2a/plant.jpg

Where: 

  • 4a957796-cb22-4e3c-8cc3-61106f65ad2a — your unique file identifier (UUID).
  • plant.jpg — the filename (optional).

From there, you can turn progressiveness on and off by adding simple URL parameters to the link. To turn your baseline JPEG into progressive, you need to add the operation progressive and then the parameter yes. The link will look like this: 

https://ucarecdn.com/4a957796-cb22-4e3c-8cc3-61106f65ad2a/-/progressive/yes/

/-/  is just the mandatory delimiter for our parser to tell operations from one another and other path components.

That’s it. Now you can use this link in your code. If you need to convert multiple images at once, you can apply this transformation in your website’s template. 

Wrapping Up 

Progressive JPEG can improve web performance and user experience. With Uploadcare, you can turn all your JPEGs into progressive quickly and easily, so why not take advantage of the opportunity? 

This feature is a part of the Uploadcare Image Transformation engine, which can help you completely automate your image editing. Besides turning images into progressive JPEG, you can crop, resize, align, rotate, apply different effects, and do all kinds of manipulations on the fly. Visit our docs to learn more about Image Transformations, and give them a try during a 14-day free trial. 

Unleash all the capabilities of the Uploadcare Image Transformations

Leave a comment

*

*