JPEG Formats — Progressive vs. Baseline
By: Vincent Tabora
Tags: Image Processing, Editing, Photoshop, Electronics, Photography

JPEG (Joint Photographic Experts Group) is an image compression format used for image files. Since JPEG is compressed, it is a good image format to use for websites, allowing faster downloads. It has been universally accepted with support from many vendor’s products and popular Internet browsers. JPEG files have a .jpg or .jpeg extension, and is a common type of file used in photography.

JPEG requires an encoder that compresses the image format, whether it is from camera RAW or directly from an image processor. Cameras can store a captured image directly to JPEG, depending on the settings. This can be set from the camera menu (refer to your camera documentation for more information).

After the image has been compressed, it must be decoded. A decoder must be installed on the device or application in order to render and display the JPEG image. This is a built-in feature for web browsers and imaging software, including the image preview features in operating systems like the macOS and Windows.

The JPEG Lossy Compression Format

To give a better understanding of JPEG, let’s start with a quick background. The JPEG image is an image that was processed using a lossy compression algorithm. When an image is compressed, there is information lost in the details. That is fine because the purpose of creating JPEG images are to minimize the number of bits in storage, effectively reducing the file size. The smaller the file size, the faster the image downloads and renders from the network.

The process begins with color transformation by sampling the image’s color channels (RGB). It goes to an undersampling technique, which is a signal processing method used to construct the image. It is then split into blocks of pixels using DCT (Discrete Cosine Transforms) for quantization. This is part of the analog-to-digital signal conversion in the image processor circuit. The result is the encoded JPEG image.

There are two types that are commonly used for displaying JPEG content.

Baseline or Standard JPEG Progressive JPEG

Let’s go over the difference between the two types of JPEG. A more technical detail of JPEG will not be discussed in this article. I will focus more on the application.

Baseline JPEG

This is the standard JPEG format compression, popularly supported by many imaging products. This includes digital cameras and image editing software. One of the most common applications of baseline JPEG are mages that render in a web browser. The baseline JPEG algorithm renders an image line by line as it processes the data when downloading from the network. The data is processed in streams, as the data arrives in the computer’s buffer coming from the network. It then renders the image from top to bottom, and left to right.

While the purpose of compressing the data is to decrease the file size to allow for faster downloading, it also depends on how fast the network is and how powerful the CPU is in processing the data. A GPU also helps in rendering large files if the application supports one. Large high resolution RAW image files that are greater than 30 MP (Megapixels) when compressed, can take longer to download and decode.

Baseline JPEG image renders from top to bottom, showing the top part of the image first. Then it works its way to the bottom, until you see the full image.

Progressive JPEG

A progressive JPEG compression format renders the image in a similar way to GIF (Graphics Interchange Format). When rendered in a web browser, the image slowly downloads the image one layer at a time. It fades in to the image until it is fully rendered. The progressive JPEG algorithm gives the appearance of a blurry image at first. Then little by little, the image begins to render until it displays the fully rendered image. The browser is actually interpreting the image line by line, but gives a blurry preview of the full image in the placeholder which is where the image is inserted in a web page.

While baseline renders line by line as the data is being read as it is sent to the web browser, a progressive JPEG image begins to the render the full image immediately. The image’s contrast begins to get sharper and more detailed as the data is processed by the web browser’s rendering engine. Finally, you will see the full depth of the image once it has fully rendered.

Progressive JPEG slowly renders the image, beginning with a blurry pixelated preview. Then it begins to get clearer and sharper, with more contrast and depth until you see the full image.

The Main Difference

Perhaps the question should be dependent on the requirements. There are some misconceptions that need to be explained. Some web developers will say that progressive JPEG is better for “faster” image downloads in a web page. That does not mean it increases the actual Internet speed, since that variable is fixed. If your Internet connection is 4 Mbps, it will remain the same. Compression does shrink the number of bits in an image thus making the download overall faster over the existing link.

Progressive just gives an immediate preview of the image while it downloads. It begins pixelated and slowly increases contrast and depth becomes clearly sharper until the image is fully rendered. When web developers say it is faster, it is because the image appears in their placeholders to give the users an idea of the images location as they are downloading. With baseline JPEG, the top most part of the images appear first as they render. If the image has not yet started to download, the user may miss it since you won’t get a preview in the placeholder the way progressive JPEG images render.

This is an example of images that download in a web page image gallery. Notice there appears to be one missing image at the bottom right section. It is actually not a missing image. The image has not yet downloaded to the browser, but since it is baseline, it will not give a preview of the image in the placeholder. This might lead some users to assume the image is missing and they may begin to refresh the page. With faster Internet connections this is not usually a problem. It is more problematic with slow Internet connections.

This image gallery is rendering progressive JPEG images. They will appear blurry at first, then slowly become clearer and sharper until the images have fully downloaded on the web page. This may give a wrong impression to users with slow Internet connections, thinking the images are blurry. With faster connections it is not a problem, and provides a placeholder preview to inform the user that there is an image that should appear.

Both formats used JPEG compression. It is just the way the images is rendered during decoding (when the image is downloading to the browser). Progressive formats are more designed for the web, or JPEG images that are coming from the network. When opening local baseline and progressive JPEG images from an image editor, it doesn’t render the same way. This is because you have more bandwidth between the local storage device and image editor. It opens instantaneously, unless the storage is from the network (e.g. cloud drive).

Converting Formats

You can convert from baseline to progressive and vice versa. All you need is an image editing software application (e.g. Adobe Photoshop). In Photoshop, after you open the baseline JPEG image, follow these steps:

Select File -> Save As … (Give the new file a name)

2. Select the JPEG file format.

3. In the Format Options select Progressive. Click OK to save the file.

There are up to 5 scans you can choose for progressive JPEG. The minimum and default is set to 3.

Synopsis

This is not a comparison of which JPEG compression format is superior to the other. They are both compressed, lossy information formats that render the same quality image. The main difference is in how they render the image to the user from the network (e.g. Internet). This is is mainly an issue with browsing content from the Internet.

Progressive will appear faster, because it can download a preview of the image in their placeholders as the page is downloading the content from the network. Baseline will appear slower because the users will see the image render from the top first and then making its way to the bottom.

Users may get a false impression from progressive JPEG images since they appear blurry at first. On the other hand, users may not be aware that a baseline JPEG image is downloading to a page if they don’t see the top part of the image appearing.

For commercial printing and paper publication, I do not recommend either format or any lossy type of compressed image. It is better to use a lossless type of format like TIFF which preserves more details.

The issues are for the most part minor. Faster Internet speeds have solved the problem for downloading web content. For slow Internet connections, progressive JPEG has an advantage by providing users a preview of the image as it renders. Baseline JPEG on slow connections may take some time to download, but does not provide a preview in their placeholder for users to be aware of. In some cases a user may just abandon the page without knowing that there are still images that have not downloaded, since they did not see the top part of the image rendering in the web browser.