Baseline vs Progressive JPEG

Let us begin by understanding what is JPEG before discussing Baseline and Progressive JPEGs.

What is JPEG ?

JPEG (Joint Photographic Experts Group) is an image compression method. JPEG uses lossy compression mode, the JPEG standard does include a lossless mode but is not widely supported. JPEG was first introduced in 1992 and continues to be amongst the most widely supported and used image codecs. With newer generation codecs like WebP and AVIF gaining popularity and wider support on devices JPEG is beginning to lose some of its share but continues to remain the second most popular image format across websites currently(refer the snapshot below).
Lossy technique allows JPEGs to maintain a high compression ratio with minimal loss in perceptible visual quality however as the name suggests the image data lost in compression cannot be recovered.

Source : https://w3techs.com/technologies/overview/image_format

What is a Baseline JPEG ?

This is the traditional or standard method of compressing a JPEG Image. You will find wider support for this format in comparison with Progressive JPEGs. Certain older devices or low compute handheld devices etc. support only Baseline JPEGs. While support for Progressive JPEGs is wide as well and most devices in the market today support this type however there is a small minority of devices that still cannot display this type of JPEG.
A baseline JPEG is rendered line by line - top to bottom (from left to right). When loaded on a local device(storage on a camera, computer etc.) you would not notice the baseline loading line by line during its decode primarily because we have much higher bandwidth when loading from a local disk. However the impact becomes noticeable on a web browser as the bandwidth varies over the internet and generally would be lesser than the kind of bandwidth we would have from local storage. This gives the impression to a viewer of a slow image load (as shown in the animation below) since the image loads in its complete form line by line, a viewer has to wait for the full image to load unlike a Progressive JPEG which gives a different impression.

What is a Progressive JPEG ?

Progressive JPEG renders with a pixelated/blurry version of the complete image before filling in the details layer by layer until the image data is completely downloaded. As demonstrated in the below animation you will see the image loading layer by layer for the entire duration. Progressive JPEGs improve user experience on a website because the viewer gets the entire image initially in its pixelated/blur form before details are filled in layer by layer, unlike a Baseline JPEG the viewer does not need to wait for the image to download line by line in its complete form leaving a large part of the window empty(primarily for large images).

Please find below the commands i used to create Baseline and Progressive JPEGs using Image Magick (will discuss more about this in a later blog).

magick grass-sky.jpg -interlace None grass-sky-baseline.jpg

magick grass-sky.jpg -interlace Plane grass-sky-progressive.jpg