Progressive JPEGs: An introduction

JPEG is the most frequently used image format on the internet. Around 71.4 percent of all websites contain photos and graphics in this format. But JPEG is actually just an umbrella term for an image compression standard. PJPEG, also known as Progressive JPEG, is one of three popular compression modes of this standard. Progressive JPEGs compress photos and graphics in a particular way, with the effect that they load differently than “normal” or baseline JPEGs.

JPEG refers to a format developed in 1992 for compressing images. It’s an umbrella term for various modes of image compression. The acronym JPEG stands for “Joint Photographic Expert Group”, referring to the group that developed the standard. JPEGs are the most frequently used image format on the internet and are chosen for photos and complex graphics with high colour depth. Based on the export settings of the particular image editor being used, there are major differences in JPEG compression.

The process of compressing reduces files in size. This saves disk space and shortens transfer and loading times. A shorter transfer time means that an image loads faster on a website. However, in most cases reducing the file size has consequences for the content, because it requires cutting down on content, in one way or another. In the case of photos and graphics, it’s important to make sure that the image quality isn’t reduced too much. This results in files that load quickly but don’t look very good.

One method of image compression that falls under the JPEG standard is the progressive JPEG or PJPEG. PJPEGs are also made using a compression algorithm, but appear differently when they are being loaded in the browser. PJPEGs work in all modern browsers, including Chrome, Firefox, and versions 9 and higher of Internet Explorer. Older versions of Internet Explorer have significant problems displaying progressive JPEGs. However, since Internet Explorer 8 has a distribution of only 0.4% worldwide, this is not relevant for most web projects. Browsers that do not support the progressive JPEG format will load the photos like normal JPEGs. So what exactly is the difference between the two formats?

The biggest difference between JPEGs and PJPEGs is the way images are loaded. Images saved as baseline JPEGs (that is, “normal” JPEGs) are loaded line by line from top to bottom. In the case of progressive JPEGs, however, the entire image is shown immediately and loaded pixel by pixel. So a pixelated, blurry image gradually sharpens. While baseline JPEGs are loaded from top to bottom, PJPEGs can be said to load from back to front.

This has a positive effect on user experience since PJPEGs appear to load faster due to the lack of extra whitespace on the page. The following images illustrate how JPEGs and PJPEGs are loaded. In the case of baseline JPEGs, the pixels appear line by line, from top to bottom:

On the other hand, PJPEGs are loaded from back to front. The image gets clearer and clearer as it loads, and the number of pixels increases incrementally.

Many users prefer the entire photo to appear immediately, even if it’s blurry. But PJPEGs also have some disadvantages.

Now the file is ready to be uploaded to your website. If the user’s browser supports the format, your photo or graphic will be loaded as a progressive JPEG.