A look at the differences between Baseline and Progressive JPEGS and how they can increase the performance and usability of your site.
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.