Toward that end, some websites progressively render images in two steps: load small, low-quality placeholder images first and then replace them with the actual versions. Given the large gap between a placeholder image and an actual one, you can readily tell when loading is complete.
Progressive JPEGs and green Martians
JPEG images are either progressive or nonprogressive, depending on their encoding order, not politics.
Encoding of and decoding of nonprogressive occurs in this simple order: from top to bottom and from left to right. Consequently, when a nonprogressive JPEG is loading on a slow connection, you see the image’s top part first, followed by the other parts as loading progresses.
On the other hand, because progressive JPEGs are encoded differently, when they load, you see a blurry version, which gradually becomes sharper as the bytes arrive.
Here is the same JPEG, the left version nonprogressive and the right one progressive, decoded in slow motion:
In essence, progressive and nonprogressive encodings for JPEGs are two ways in which to optimize images and make them display faster on sluggish connections.
What’s the Magic Behind Progressive JPEGs?
Copy link to this heading
JPEG performs two transformations for lossy compression:
- Convert RGB pixels to YCbCr pixels. Instead of Red, Green, and Blue channels, JPEG works with a luma (Y) channel and two chroma channels (Cb and Cr). Because the human eye is more sensitive to distortion in luma (brightness) than to that in chroma (color), JPEG handles channels separately and, optionally, downsample the chroma channels to half the original resolution—a process called chroma subsampling.
- Do mathematical magic, called Discrete Cosine Transform (DCT), with the pixels. That is, convert every block of 8×8 pixels (64-pixel values) to 64 coefficients, which convey the block’s information in a different way. The first coefficient, called the DC coefficient, is the average pixel value of all the pixels in the block. The other 63 coefficients, called AC coefficients, depict the horizontal and vertical details within the block in the order of low frequency (overall gradients) to high frequency (sharp details).
For human perception, luma and low-frequency signals are more important than chroma and high-frequency signals. Cleverly, JPEG encodes with less precision what we can’t see well anyway, resulting in smaller files. The article Unraveling the JPEG is a brilliant interactive demonstration of how those transformations work. And, as a bonus, they also enable progressive encoding and decoding of JPEGs.
Instead of going through an image block by block, you can encode each block’s coefficients through spectral selection, as nonprogressive JPEGs do, i.e., encode all the DC coefficients first, then some low-frequency AC coefficients and the high-frequency AC coefficients. Alternatively, you can apply successive approximation, i.e., store the most significant bits of the coefficients first and the least significant ones later in the bitstream.
Both spectral selection and successive approximation require that the encoder and decoder traverse the image multiple times. Each iteration is called a scan. Typically, encoding a progressive JPEG takes about 10 scans, which is why, during decoding, an image transitions from being blurry to being sharp after about 10 refinement steps.
What Are the Advantages and Disadvantages of Progressive JPEGs?
Copy link to this heading
One obvious advantage of progressive JPEGs is that they display a full preview while downloading an image on a slow connection. You can see the picture even when only a fraction of the file has been transferred and decide whether to wait for the download to complete. However, some people consider that loading behavior a disadvantage because it’s hard to tell when an image has finished loading. You might form a bad impression of the website because “the photos look blurry” when, in fact, the site is still loading and displaying a progressive preview of the images. More on that point later.
A less obvious advantage of progressive JPEGs is that they tend to be smaller in size than nonprogressive JPEGs even though the final image looks exactly the same. Because similar DCT coefficients across multiple blocks in progressive JPEGs are encoded together, smaller files result; whereas nonprogressive JPEGs, whose blocks are encoded one by one, weigh more. Oftentimes, the extra compression is only a few percentage points, yet it still saves bandwidth and storage without affecting the image quality.
As for the downsides of progressive JPEGs, first of all, they’re not always smaller. For small images like thumbnails, progressive JPEGs are often a bit larger than nonprogressive JPEGs. For such small image files, progressive rendering delivers no gains.
Additionally, it takes more CPU time to encode and decode progressive JPEGs because the algorithm must go over the image data multiple times, not in one single scan. Plus, the process incurs more memory since all the DCT coefficients must be stored in memory during decoding. In nonprogressive decoding, you need to store only one block of coefficients at a time.
Decoding progressive JPEGs takes about 2.5 times longer than decoding nonprogressive ones. So, despite the fast delivery of a preview, the overall CPU time is significantly longer—whether on a desktop or laptop computer. Actually, progressive or not, JPEG decoding is pretty fast, and memory and processing power are usually abundant. On low-power devices like smartphones, however, decoding does have a slight impact on battery life and load time.
Encoding progressive JPEGs also takes longer by about six to eight times, and it’s harder to do that in hardware. That’s why cameras, even high-end ones, produce nonprogressive JPEGs as a rule.
Benefits of Progressive JPEG
On a website, progressive JPEG can improve user experience. Although blurry, visitors can already see the entire image at first sight. Plus, generally being smaller in size, progressive JPEG can also reduce resource usages like bandwidth and disk space — helping your website to load faster.
Most popular browsers, like Firefox and Chrome, also support progressive images. But if you use an older version of Internet Explorer (before Windows 7), make sure to install the latest update to enable the feature.
How to Use Progressive JPEG Images
Here are the steps to optimize your website with progressive JPEG images:
Step 1: Analyze JPEG Images
To check what type of JPEG images your website displays, you can do a simple analysis with WebPageTest:
- Paste your site’s URL to the Enter a Website URL box and press Start Test.
- Once the test runs are complete, go to the Test Results page, then select the Performance Review tab. Scroll down until you find Use Progressive JPEGs. The results will show “FAILED” for Baseline JPEG images, as shown below:
You will then have to convert them to progressive JPEGs.
Step 2: Convert Images to Progressive JPEG
There are free software and tools that can do the job. Our recommendations are:
- Optimizilla
Other than converting baseline JPEG images to progressive ones, you can also reduce the image size with this tool. It uses the lossy compression technique. Simply go to Optimizila and upload your image — up to 20 images in one session. You can then set the image quality before downloading, but make sure to keep it at 85 or above for better quality.
Once processed, your image will be both progressive and smaller in size. - RIOT
RIOT is a free software that has a lot of features when it comes to image optimization. From creating progressive images, adjusting colors, and adding metadata information, everything can be done through its simple interface. You can also convert your image into other different formats — JPEG, GIF, and PNG. What’s more, you can see the changes directly, side by side. However, keep in mind that this tool is only available for Windows.
Step 3: Replace Old Images
After converting, you’ll need to update the images within your site. You can access your hosting’s File Manager or use an FTP client to locate the existing baseline images. Remove and replace them with the progressive JPEG images.
To avoid technical issues, make sure to use the same file name for every image. Now, test your website again using WebPageTest. If you do the process correctly, you won’t find any baseline JPEG images in the performance result.
Conclusion
If you want the images on your website to load faster, it’s better to change them into progressive JPEG format. It works by loading images in successive waves. You’ll see a blurry or pixelated picture at first, but it’ll clear out.
To see if your website contains baseline JPEG images, you can use the WebPageTest tool. If it does, you can convert them to the progressive format using either Optimizilla or RIOT.
Tell us your thoughts about this tutorial on the comments below!
What Are Progressive Images?
Progressive images are images that load in the browser in multiple stages. Web developers can use them to improve the user experience and reduce page load times and data usage. They are usually JPEG files, a more common file type for images on the web, and can still be viewable when in low quality before the site can show the whole image.
For example, let’s say you have a 2 MB image on your website, and it’s crucial your users see it ASAP. Progressive images will allow you to do so without loading all 2MB simultaneously. They will load up data and display something useful, such as a thumbnail of the image. This allows users who have slower connections or mobile devices that cannot download large files quickly enough due to bandwidth restrictions.
How Can Progressive Images Improve Your Website Experience?
In simple terms, using progressive images makes your site faster to load. This affects two things: your site’s SEO and your overall user experience.
Slow page load speeds can dramatically affect your site’s SEO. Google has proven that users will abandon a site within seconds if it takes too long to load – with a 32% chance if it’s longer than three seconds and jumping to a 106% chance if it takes up to six seconds. And so, it affects how the site will rank, as Google will assume the site doesn’t have any relevant info compared to faster pages.
And users abandoning a page means more than just missing out on SEO rankings. It means that something on your site is taking too long to load, making users give up before seeing what you offer. But with progressive images, you can create a robust, responsive design that can get images ready for your users sooner – making them less likely to leave and more likely to stick around.
Creating Progressive Images with Cloudinary
Progressive images are a great way to improve your site’s user experience. They can make it easier for users to navigate and understand what they’re looking at, which helps them find what they want faster.
If you want to optimize your website and start using progressive images, then Cloudinary is the platform for you. Our Media Experience Cloud can help manage and organize your digital media, which supports progressive images through our simple API. And our Programmable Media can dynamically change your content to fit your user’s needs, including video quality and image transformations.
What are you waiting for? Get started with Cloudinary with a free account and unlock your media’s true potential.
