Introduction
One of the crucial tasks in website optimization that some people tend to forget is images. In one of our previous guides, we have learned how to effectively improve site performance by serving scaled images. In this one, we will take it one step further and learn how to optimize baseline JPEG images into progressive ones.
Table of Contents
What is the difference between baseline JPEGs and progressive JPEG images?
Generally, JPEG images load from top to bottom and they are called baseline images. Progressive JPEG images differ by showing the entire image immediately while only loading a part of the data, meaning that it may look pixelated until it is fully loaded. Below you will find an example for better understanding.
Baseline JPEG loading cycle:
Progressive JPEG loading cycle:
How will progressive JPEG images improve website performance?
In addition to the better visual experience, progressive JPEG images are 2% to 10% smaller in size compared to baseline pictures, thus using them will improve the loading of your website and overall performance. Your requests to the server will be shorter and more efficient, which will also reduce your resource usage such as bandwidth, disk space. That is extremely efficient if you are hosting a website on free or shared hosting services. Websites with a large amount of baseline JPEG pictures will also greatly benefit from the lossy compression into progressive JPEG images. It is also worth mentioning that visitors who access your website via mobile device or slow internet connection will have an overall better visual experience and faster load times if you use progressive jpeg images.
IMPORTANT! Some browsers (for example Internet Explorer before Windows 7) do not support progressive JPEG images. However, all later versions support it.
What you’ll need
Before you begin this guide you’ll need the following:
- FTP access
Step 1 — Analyzing Your Site
To locate baseline JPEG images that can be replaced with progressive ones, we will be using WebPageTest.org. This tool is really great, as you can also get the progressive version of a baseline JPEG image without using any additional tools.
Here are the results of Performance Review section after analyzing a test site:
Step 2 — Downloading progressive JPEG images
There is a wide variety of tools that will allow you to convert baseline JPEG images to progressive ones. Here are a few:
Option 1 – Compressing baseline JPEG to progressive using WebPageTest.org
After finding the list of images that can be replaced, navigate to Details section and press View All Images
That section will display all the images on your page. Press Analyze JPEG on each picture located in Step 1 of this tutorial and scroll down to the bottom.
There you will find Quality 85 Image of your original picture. Save all the Quality 85 Images to your computer and proceed to the next step. We would highly recommend saving the images with the same file name as the original ones, as that way the replacement procedure will be much easier.
Option 2 – Converting baseline JPEGs to progressive with Optimizilla
If you are planning to upload more images to your site in the future, or if your website is not yet uploaded, you can use Optimizilla to convert your baseline JPEG images into progressive ones. Using this tool you can optimize up to 20 images and shrink them using lossy compression algorithms to Quality 85 or even less.
IMPORTANT! Going below 85 may result in a loss of quality. Proceed with care.
Option 3 – Optimizing images with CMS plugins
If you have a WordPress blog, you can easily optimize your baseline JPEG images using WP Smush. Check out this tutorial for detailed instructions on how to use WP Smush
Step 3 — Replacing old images
IMPORTANT! Make sure to backup your website or the images that you are planning to replace before proceeding.
Using File Manager or any FTP client, locate the images of Step 1. Remove and replace them with the new Quality 85 Images acquired in Step 2. Once again, make sure that they have the same file name to avoid any 404 errors or loading issues.
Step 4 – Testing the changes
Once all the images are uploaded, clear your browser cache and open up your website to see if everything loads fine. After that, you can analyze your website with WebPageTest.org to check if everything was done correctly. Here are the results that you should see in the Details section:
Conclusion
In this guide, we have learned how to boost the speed of your website by using progressive JPEG images instead of baseline. The smoother visual experience and lower size are sure to make you and your visitors happier while at the same time reducing the site’s resource usage, improving SEO and website performance. It’s basically a win-win situation for everyone.
Related website optimization guides:
Add Comment