Images have always been one of the biggest culprits for slow website load times and that problem is continuing to grow. Mobile devices require pages that load fast and use few resources, retina devices need images that are twice as big as the standard size, and cinema displays need extra wide images to span their giant screens. To top it off, large images load in slowly leaving unsavory whitespace until the images are fully loaded. How can we begin to address this dilemma and still have time for the rest of modern web design’s challenges? Let ’s take a look at one solution – the progressive JPEG.
The Difference Between Baseline & Progressive JPEGs
Baseline JPEGs account for most of images on the web. These JPEGs start as blank spaces and slowly appear from top to bottom as the page is loaded. Baseline JPEGs can take a long time to load fully and are often one of the last resources to load on a page.
Progressive JPEGs use a more graceful approach that first loads a low-resolution version of the image as a place holder and increases the quality as the resource is loaded. This method removes the blank space associated with baseline JPEGs, which could be beneficial in solving many issues with slow load times.
For example, imagine you are loading in a full-size background image for your website using the baseline format. That image is probably pretty big, especially if you support large screens like cinema displays and retina devices. Unless the end-user has a cached copy of that background image (from a previous visit to your site), the image is going to load very slowly from top to bottom. Not a great solution, right?
If instead you chose to use the progressive format, the experience would be a lot smoother, even if a user is visiting your site for the first time. A low-resolution version of the image will fill the entire screen almost instantly and the quality will get better and better as the image loads.
Progressive JPEGs work great in all modern browsers including Google Chrome, Mozilla Firefox and Apple Safari. The only browsers that have significant issues with the progressive format is Internet Explorer 8 and below. This is no surprise as IE8 and below do not support the SVG image filetype and have been notoriously slow at adopting new image formats.
How to Save Images as Progressive JPEGs
There are a few great tools for saving images in the progressive format and all of them seem to do an equally fantastic job. Mostly it just depends on your preference and familiarity with the particular application.
Here is how to save an image in the progressive format using Adobe Photoshop.
- Open your image in Photoshop and navigate to the Save for Web dialog box (File > Save for Web…).
- In the image format section, tick the checkbox next to progressive.
- If you’d like to save this setting to use again later, save it by clicking on the menu button in the top right corner of the dialog box.
- Finally, click the Save button to create your image.
As you can see, there isn’t much to it! So now you have no excuse – start saving those slow loading JPEGs in the progressive format.