Progressive JPEG images: What Is It and How It Can Improve Website Performance
Tags: performance, uiweekly, ux, webdev
Published: 2020-01-15 18:28:58

A progressive JPEG image is encoded differently than a standard or baseline JPEG image. It loads in successive waves until a clear picture is formed. This can improve a website’s performance as the images seems to be loading faster.

<h2>The Difference Between Baseline JPEG and Progressive JPEG</h2>

Baseline JPEG and progressive JPEG differs in the way it compresses and displays images — especially if you have a slow internet connection
The standard JPEG format loads images one line at a time, from top to bottom, and each line is already pixel perfect. Hence, it can take a while for the picture to load fully.

<img src="https://thepracticaldev.s3.amazonaws.com/i/riculr7s7o1rqtg46ec7.png">

As for progressive JPEG, the image appears all at once as a whole, but it’ll be blurry and pixelated a first. Gradually, you will see a clear and fully loaded image.

<img src="https://thepracticaldev.s3.amazonaws.com/i/7z7wqbqob6bvvok5wn8o.png">

<h2>Benefits of Progressive JPEG</h2>

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.

<h2>How to Use Progressive JPEG Images?</h2>

Here are the steps to optimize your website with progressive JPEG images:

<h3>Step 1: Analyze JPEG Images</h3>

To check what type of JPEG images your website displays, you can do a simple analysis with <a href="https://webpagetest.org/" target="_blank">WebPageTest:</a>

<ol>
    <li><p>Paste your site’s URL to the <b>Enter a Website URL</b> box and press <b>Start Test</b>.</p></li>

<img src="https://thepracticaldev.s3.amazonaws.com/i/c556256z3g7j5il8nv0n.jpg">

    <li><p>Once the test runs are complete, go to the <b>Test Results</b> page, then select the <b>Performance Review</b> tab. Scroll down until you find <b>Use Progressive JPEGs.</b></p></li>
</ol>

The results will show “FAILED” for Baseline JPEG images, as shown below:

<img src="https://thepracticaldev.s3.amazonaws.com/i/a0ascd61fnkbhw0bb702.png">

You will then have to convert them to progressive JPEGs.

<h3>Step 2: Convert Images to Progressive JPEG</h3>


There are free software and tools that can do the job. My recommendations are:

<ol>
    <li><p><b><a href="http://optimizilla.com/" target="_blank">Optimizilla</a></b>
    <br>
    <br>
Other than converting baseline JPEG images to progressive ones, you can also reduce the image size with this tool. It uses the <a href="https://www.hostinger.com/tutorials/lossy-vs-lossless" target="_blank">lossy compression</a> 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.</p></li>

<img src="https://thepracticaldev.s3.amazonaws.com/i/e0loqouitu17z3a5dgmt.jpg">
    <br>
    <br>
<p>Once processed, your image will be both progressive and smaller in size.</p>

    <li><p><b><a href="https://riot-optimizer.com/" target="_blank">RIOT</a></b>
    <br>
    <br>
RIOT is 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 three 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.<p></li>
<img src="https://thepracticaldev.s3.amazonaws.com/i/x5m9cibswi5cxzglffur.jpg">
</ol>

<h3>Step 3: Replace Old Images</h3>

After converting, you’ll need to update the images within your site. You can access your hosting’s <a href="https://www.hostinger.com/tutorials/cpanel/how-to-use-cpanels-file-manager" target="_blank">File Manager</a> or use an <a href="https://www.hostinger.com/tutorials/ftp/filezilla-ftp-configuration" target="_blank">FTP</a> 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 <a href="https://webpagetest.org/" target="_blank">WebPageTest</a>. If you do the process correctly, you won’t find any baseline JPEG images in the performance result.

<img src="https://thepracticaldev.s3.amazonaws.com/i/fnzu8lxfmtnatjasd4p9.png">

<h2>Conclusion<h2>

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 <a href="https://webpagetest.org/" target="_blank">WebPageTest</a> tool. If it does, you can convert them to the progressive format using either <a href="http://optimizilla.com/" target="_blank">Optimizilla</a> or <a href="https://riot-optimizer.com/" target="_blank">RIOT</a>.