By Jonathan Griffin. Editor, SEO Consultant, & Developer.
This article looks at the differences between baseline and progressive JPEGS, how you can optimize progressive jpegs for your website, and more.
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 images work best on photographs or other realistic images with a smooth tone and color variation. Because the compression of these images is very efficient, its usage on the web is prevalent.
As of the 3rd March 2022, JPEGs are used on 74.3 percent of all websites.
What is a Progressive JPEG Image?
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 standard JPEG loads the image from the top to bottom line by line.
JPEG vs. 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 shows, 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.
What are the Advantages of Progressive JPEGs?
Improved user experience
Progressive JPEGs were all the rage back in the late 1990s when the 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 requiring larger images, images’ time to load has slowed.
Traditional baseline JPEGs leave considerable whitespace on the screen until the image has finished loading. This makes the web pages appear to load slowly.
The page seems to load much more quickly with progressive images as there is no whitespace. The whole image is visible at the very beginning, and the image can finish rendering after the entire page has loaded.
Reduced Largest Contentful Paint
Core Web Vitals is a distinct part of the Google Page Experience Update, which can now affect your Google Rankings.
Core Web Vitals are split into three parts:
- Largest Contentful Paint (LCP): measures loading performance.
- First Input Delay (FID): measures interactivity.
- Cumulative Layout Shift (CLS): measures visual stability.
Google states that the LCP should occur within 2.5 seconds of when the page first starts loading.
The argument is that the LCP should be calculated not when the image has completed loading but when it is considered “Good Enough”. This could be anywhere between 15% to 50% for a progressive JPEG based on current proposals.
The current discussions are currently (as of September 2021) waiting for benchmark tests to answer the following blocker question “do we have evidence that progressive image loading creates a better experience?”
We’ll monitor the discussions and provide an update here when further information is available.
What are the Disadvantages of Progressive JPEGs?
Progressive images are larger than modern formats such as WebP.
If your users have access to fast internet, using progressive images may be lower than the benefits of smaller file size.
Optimizing Progressive JPEGs for your Website
Creating a progressive JPEG is not a binary choice. There are many different scripts for encoding progressive images, each with advantages and disadvantages.
Advanced encoders, such as MozJPEG or libjpeg, can try out multiple different scripts automatically and pick the one that provides the greatest compression, or they can also utilize custom scripts. These tools rely on the command line, so they may not be suitable for everyone.
Unfortunately, though, most web tools do not allow any choice as to what script is being used or configuration options.
Let’s bear in mind that optimizing a progressive jpeg is not always about compression. If it were, you would choose a non-progressive JPEG or an image format such as WebP that offers significantly better compression.
Webmasters tend to use progressive jpegs because they can provide a better user experience, not necessarily because they result in the smallest file sizes.
When optimizing your image, ask yourself the following:
- Does file size matter?
- Do you want the first wave of the image to be black and white or in full color?
- Do you want a quick, low-quality preview, followed by a transition to the full-quality image?
Using a custom script to optimize your images can work well but also have its pitfalls. Get it wrong, and you might find your image loading jarring (such as a brief flash of the image looking green), much in the same way as a flash of unstyled text.
For this, you may wish to consider using a service such as Cloudinary.
As part of their service, they offer four types of progressive JPEG encoding:
- Non-progressive or Baseline
The semi-progressive rendering does not split the three different color channels on the first wave compared to the Progressive rendering. As such, the image will not have a flash of grayscale or green when it first starts rendering.
The Steep Progressive rendering creates a low-quality image, then follows up with a high-quality image, rather than successive waves slowly improving it.
You can read more about the different scripts Cloudinary uses for their service here.
How to Check if a JPEG is Progressive
A JPEG image comprises a sequence of segments, each beginning with a marker. Each marker starts with a
0xFF byte followed by a byte that indicates the type of marker it is.
Looking at these markers can determine whether the JPEG image is baseline or progressive. For example:
0xFF, 0xC0This marker represents the Start of Frame for a baseline image
0xFF, 0xC2This marker represents the Start of Frame for a progressive image
You can search the binary data of an image file to determine whether the JPEG is progressive or baseline.
We have built a simple tool that checks whether a JPEG is progressive here. It works by checking for the progressive image marker in the binary data described above.
You can also try out the tool below:
Progressive JPEG Tester
Choose the image file you wish to test below:
Progressive JPEG Converters
By default, most image-editing tools will save an image in the baseline format.
Many image editing tools can be used to save a picture as progressive, including Photoshop and ImageMagick. If you already have a file you wish to convert, you can load the image into the editor and convert it by resaving it in the desired format.
Our preferred image editor is Photoshop, but Adobe has complicated matters since Photoshop CC 2015 by removing the option to save as a progressive Image when using the “save image as” function. Fortunately, they still have functionality with their legacy “save for web” option in the menu.
You can find this by going to File -> Export -> Save for Web (legacy). When saving, tick the “Progressive” option as shown in the screenshot below:
If you have an older version of Photoshop, you can go to File -> Save for Web to get to the relevant interface.
Cloudinary is an image optimization platform where you can store, create, manipulate, and deliver images. It can be used to optimize images automatically or based on the specific settings you provide.
Cloudinary offers a generous free plan that should be sufficient for most small blogs or business websites, and it is what we currently use on this website.
The advantage with Cloudinary is that you can choose between different types of progressive jpegs, such as No Progressive, Standard Progressive, Semi-progressive, and Steep-progressive.
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.
The tool is straightforward to use, where you 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 have used this program extensively in the past but have now moved on to optimizing images programmatically with Cloudinary.
You can see a screenshot below:
An almost direct replacement for the old Smushit service is one called Kraken.io, and this is a service we have used in the past ourselves. Kraken.io can be used either via their web interface or one of the many integrations, including WordPress.
The web interface is straightforward 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. At 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.
Progressive JPEG vs. WebP
There are many image formats better than JPEG. The main is WebP.
WebP is an image format that supports lossy (reducing file size that may reduce visual quality) and lossless (reducing file size without any impact on visual quality). It also permits animation and alpha transparency.
One of the easiest ways to implement WebP is to use a JPEG as normal and serve it via a content delivery network that offers image optimization. This will then serve a WebP version when it can provide file size savings to compatible browsers.
Companies such as CloudFlare provides this functionality with their Pro plan. Cloudinary also offers this and has a generous free plan.
Other Image formats
We’ll finish by touching briefly on two 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.
JPEG 2000 Image Format
The JPEG committee created JPEG 2000 (JP2) in 2000. Their original intention was to supersede the original Image Format 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 use it.
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.
Progressive JPEG Browser Support
Progressive images work well with all modern browsers, including Chrome, Firefox, and Internet Explorer 9. The only browsers with 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.
|Android Webview||Chrome Android||Edge||Firefox Mobile||IE Mobile||Opera Mobile||Safari Mobile|