� This post was first published on the Branditechture Blog https://branditechture.agency/baseline-vs-progressive-jpeg/ on Nov. 25, 2020. If you would like to read a fully optimized version with videos and images, then click the link to the original post.

What is JPEG?
JPEG, also known as JPG, stands for Joint Photographic Experts Group.

It is a standard image format used for compressed image data.

Despite the huge reduction in file size as a result of the compression, JPEG images can still maintain reasonable image quality.

This compression allows JPEG files to be used widely on the Internet, most notably on web pages.

Unlike PNG, JPEG does not support alpha channels (also known as lossless transparency).

In 2010, a new image format called WebP was released by Google. Talking about lossless image compression, WebP has far better compression levels when compared to JPEG.

In layman’s term, lossless compression simply means reducing the file size of an image without reducing its visual quality or visual integrity.

The biggest reason for compressing images for web pages is so that the images become lighter in file size, therefore reducing the time required to fully load a webpage.

Let’s quickly take a look at the crucial differences between Baseline and Progressive JPEG, including the pro and cons of our recommended JPEG format — The Progressive.

Visit https://branditechture.agency/baseline-vs-progressive-jpeg/ to Play Video

If you are a Graphic Designer, you must be familiar with this dialogue in Adobe Photoshop;

[img]https://branditechture.agency/wp-content/uploads/2020/11/Save-As-JPG-Dialogue.jpg[/img]
Save As JPG Dialogue

What is Baseline JPEG?
A Baseline JPEG is created using the JPEG compression algorithm that will start to render the image line by line from top to bottom as more data becomes available.

Baseline JPEG Format
On a webpage, for example, you can be sure that the compression algorithm of a JPEG image is Baseline when you notice it rendering from top to bottom in a line by line manner. This effect is better observed on a slow internet connection or when viewing a fairly large image.

What is Progressive JPEG?
A Progressive JPEG encoding initially renders a full-sized but low-quality pixellated image, but the quality only becomes better and clearer as the image downloads.

Progressive JPEG Format
When used on a web page, progressive JPEGs can improve user experience by giving the illusion of an instant image load.
Although blurry at first, users can still see the entire image while the image keeps loading in the background.
The number of transition depends on the amount of “Scans” set during the JPEG encoding. As the Progressive JPEG renders, each iteration is referred to as a Scan.

You may not notice this transition if you are on a fast internet connection because everything can happen too fast.

The Progressive JPEG encoding came as a space-saving, performance-enhancing upgrade to the Standard or Baseline JPEG encoding.

Unless you’ve done some JPEG optimization, it’s very likely your website is full of Standard Baseline JPEGs.

The Pros and Cons of Progressive JPEG

Pros:

✔ The compression ratio can be adjusted in programs like Adobe Photoshop

✔ Relatively smaller file size

✔ Supports lossless image compression

✔ it is best suited for use on websites as it quickly renders the images as it downloads more of the image data in the background, therefore effectively reducing wait time.

Cons:
✘ Doesn't work on very old browsers such as Internet Explorer 8

✘ The difference in loading times are barely noticeable in modern browsers, hence might not be worth all the effort of re-econding your already uploaded images.

✘ Users can never be so sure if an image is originally blurry or just hasn’t finished loading.

0x15499083dB20f47a0EfF0Afa691a7Fc860a90716