In this article, we look at the differences between baseline and progressive JPEGS. Also, we show that by using progressive images you can significantly increase the page load time of your website as well as improve the user experience for your website visitors.
JPEG is an abbreviation for the Joint Photographic Experts Group, which 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 February 2016, JPEG is used on 73.1 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 progressive loading technique gives the visual perception to the website visitor of the images loading faster as the user can see the whole image straight away, as opposed to the usual way which JPEGs load, which is gradually from the top to bottom line by line.
The clearest way to understand the differences between progressive 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 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.
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. More recently, though, 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, the web pages appear to load slowly. Conversely, with progressive images the page seems to load much more quickly as there is no whitespace, and the resolution of the image can finish rendering after the page “appears” to have finished loading.
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.
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 just tick the “Progressive” option as shown in the screenshot below:
If you have an older version of Photoshop, you can just go to File -> Save for Web to get to the relevant interface.
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:
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.