Progressive JPEGs - How to improve website speed

Learn about Progressive JPEG Images, and how they can improve the performance of your website.

Web Development Menu

In this article, we look at the differences between baseline and progressive JPEGS. By using Progressive images you can decrease the page load time, improving the user experience for your website visitors.

JPEG is an abbreviation for the Joint Photographic Experts Group. They created the format back in 1992. JPEG images can use the filename extension of .jpeg or .jpg.

JPEG images work best on photographs or other realistic images that have a smooth variation of tone and color. Because the compression of these types of images is very efficient, its usage on the web is very popular. As of the 1st November 2018, JPEG is used on 72.8 percent of all websites.

What is a progressive JPEG?

A progressive JPEG is an image created using compression algorithms that load the image in successive waves until the entire image is downloaded. This makes the image appear to load faster, as it loads the whole image in progressive waves. A normal JPEG loads the image from the top to bottom line by line.

JPEG vss Progressive JPEG Example

The clearest way to understand the differences between progressive rendering and baseline JPEGS is via the example below:

Baseline vs. progressive — 30 percent loaded

You can see that only a small part of the baseline JPEG is showing, but while the resolution is poor, you instantly see the whole progressive version.

Baseline 30% Loaded
Baseline 30% Loaded Source: The Webmaster.
Baseline 30% Loaded
Progressive 30% Loaded Source: The Webmaster.

Baseline vs. progressive — 70 percent loaded

As the progressive JPEG loads, the resolution increases in quality, so that most of the image is reasonably clear even though only 70 percent of the image has loaded.

Baseline 70% Loaded
Baseline 70% Loaded Source: The Webmaster.
Baseline 70% Loaded
Progressive 70% Loaded Source: The Webmaster.

Improved user experience

Progressive JPEGs were all the rage back in the late 1990s when internet relied on slow dial-up connections until the GIF format rose in popularity. With the increase in mobile devices with slower internet connections, or retina devices that require larger images, the time taken for images to load has slowed.

With traditional baseline JPEG’s leaving large whitespace on the screen until the image has finished loading. This makes the web pages appear to load slowly.

With progressive images, the page seems to load much more quickly as there is no whitespace. The whole image is visible at the very beginning, and the resolution resolution of the image can finish rendering after the whole page has loaded.

Progressive JPEG Browser Support

Progressive images work well with all modern browsers including Chrome, Firefox, and Internet Explorer 9. The only browsers that have significant issues with the progressive format are Internet Explorer 8 and below. With only 0.4 percent of Internet Explorer Users now using IE8 or below, this is not something you should worry about.

Even where a browser does not support such images, they would still display, but only after the entire image file has loaded.

How to Create Progressive JPEGs

Most image-editing tools by default will save an image in the baseline format. Up until March 2015, a service called “Smushit” was the tool many people used to optimize images, converting them to progressive in the process.

Many image editing tools can be used to save a picture as progressive, including Photoshop, ImageMagick or Fireworks, but this involves manually loading the image into the editor, and resaving it.

Photoshop

Our preferred image editor is Photoshop, but Adobe has complicated matters by Photoshop CC 2015 removing the option to save as a progressive Image when trying to “save image as.” Fortunately, they still have the old legacy “save for web” menu.

You can find this by going to File -> Export -> Save for Web (legacy), and then when saving, tick the “Progressive” option as shown in the screenshot below:

Photoshop save for web.
Photoshop save for web. © Screenshot.

If you have an older version of Photoshop, you can just go to File -> Save for Web to get to the relevant interface.

Progressive JPEG Converters

RIOT

One of the best tools for Image Optimization is a small Windows program called RIOT. RIOT stands for Radical Image Optimization Tool. RIOT is a fairly old tool, that was created around 2010. Development of the tool was rather stagnant from around 2013 until 2016, but it has recently seen some improvements with the latest release in October 2018, which also includes the WebP format we briefly discuss later.

The tool is very easy to use, where you just drag and drop your image, and then compare the original with your optimized version side by side. You can control compression, the number of colors, metadata settings, select image format (JPG, GIF, WebP or PNG) and more. We swear by it, and the chances are you have already seen images on this website optimized by it.

You can see a screenshot below:

RIOT Example.
RIOT Example. © Lucian SABO

You can download the tool here.

Kraken.io

An almost direct replacement for the old Smushit service is one called Kraken.io, and this is a service we use ourselves. Kraken.io can be used either via their web interface or one of the many integrations, including WordPress.

The web interface is very easy to use, although with the free plan you can only upload one file at a time, which can be up to 1MB in size. You can choose between lossy (high compression) or lossless. You can see a screenshot of the web interface below:

Web Interface Uploader · Kraken.io.
Web Interface Uploader · Kraken.io. © Screenshot.

The WordPress plugin will work with the free plan for a limited time (50MB in total), so to make the most of this you will want to pay for one of the premium plans. On first glance, it will appear to cost $9 per month for their Basic Plan, but if you look closely at the pricing table, you will see a Micro Plan for just $5 per month. The micro plan has been more than adequate for our needs on this website.

When using the WordPress plugin, it will automatically optimize and convert your image files when you upload them. You can also optimize existing files from within the Media Library.

Kraken WordPress plugin.
Kraken WordPress plugin. © Screenshot.

How to Check if an Image is a Progressive JPEG

While you can use tools such as ImageMagick to test if an image is Progressive, we found a little website tool where you can upload your image, and it will tell you immediately. The interface is very basic, but we have tested it, and it works. You can find it here.

Is there a better Image Format than JPEG?

We’ll finish off by touching briefly on some other image formats that you should be aware of. There are three in particular that have superior compression and higher quality characteristics. We’ll take a look at them in turn.

WebP Image Format

WebP is an image format that supports both lossy (reduction of files that may reduce visual quality) and lossless (reduction of files without any impact on visual quality). It also permits animation and alpha transparency.

Current support for WebP images is limited, with only really Chrome and Opera offering decent support. As such, a fallback strategy will be required. Should you wish to go down this route, you can download a cwebp conversion tool here.

One of the easiest ways to implement WebP is to use JPEG as normal, and then use a content delivery network that will serve a WebP version when it can offer savings to compatible browsers. CloudFlare provides this functionality with their Pro plans, as well as other image optimizations. This is what we use on The Webmaster to speed up our images loading time.

JPEG 2000 Image Format

The JPEG committee created JPEG 2000 (JP2) in 2000. Their original intention was to supersede the original Image Format that they created in 1992, but history shows this never happened. It features a newly designed, wavelet-based method. It offers some advantages in image fidelity over standard JPEG.

Its browser support is limited, with only Safari making any attempts to allow its use.

JPEG XR Image Format

The latest JPEG image format, again created by the JPEG Group, has better compression. It supports lossless compression, alpha channel, and 48-bit deep color over the normal jpg format.

Internet Explorer and Edge only currently support this image format.

Jonathan Griffin. Editor @ The Webmaster

About the author

Editor at The Webmaster.

Jonathan Griffin has been the Lead writer at The Webmaster for the last 5 years. Having provided technical SEO, WordPresss development, and hosting services for clients, his passion remains to help small businesses and bloggers develop their online presence.

In his spare time, he loves to push his technical knowledge further, and regularly undertakes professional courses on subjects ranging from python development, digital marketing, and Google Analytics.

Find out more about Jonathan Griffin on our About Page.