256 Kilobytes

What Are Progressive JPEGs?

Articles in Web Development | By Louis J. V. Cicalese

Published 2 months agoThu, 14 Mar 2019 13:14:55 -0700 | Last update 2 months agoThu, 14 Mar 2019 13:20:24 -0700

Probably JPEGs that advocate for equal rights and health care reform, amiright?

680 views, 1 RAM, and 1 comment

JPEGs: You Know ‘Em You Love ‘Em

JPEG is one of the most commonly found image file formats on the Internet, and is often used for digital photographs in particular.

JPEG is a method of lossy compression, meaning that it is ideal for reducing the amount of data needed to store or transmit the image, with the tradeoff being that it is susceptible to degradation if it repeatedly copied or otherwise processed.

JPEGs vs PNGs: Five Second Overview

This stands in contrast to the other most frequently used image file format on the Internet, PNG, which is lossless, but also typically results in larger file sizes and potentially longer load times. PNGs can also be transparent, while JPEGs cannot.

Generally speaking, JPEGs allow for faster web page load times, which can also benefit SEO. PNG is advantageous for if you want a lossless compression for whatever reason, or if you are saving an image with hard lines, such as text.

However, when choosing the JPEG file format there is another distinction which fewer people are aware of: Baseline JPEGs vs Progressive JPEGs.

Baseline JPEGs

Most JPEGs are saved in the Baseline mode, also known as “Sequential JPEGs.” This mode is probably what you see most often when browsing the Internet. JPEGs saved in baseline mode are not compressed or rendered all at once, but rather pixel by pixel and line by line, from top to bottom.

Example of how a Baseline JPEG may sequentially load over time. Image from hub.amplience.com

If you’ve ever been loading a JPEG in your browser when your Internet timed out, leaving only a top portion of the image showing, this was a JPEG saved in baseline format.

Further Breakdown: Standard vs Optimized Baseline JPEGs

When using some image editing software, such as Photoshop, you may have the option to choose between Baseline (Standard) and Baseline Optimized (as well as progressive, which we’ll get to soon) when saving a JPEG.

The Standard option is just a regular JPEG which will show up on virtually every web browser ever. Baseline Optimized provides optimized color and quality of the image and smaller file sizes. It is compatible with almost all current browsers, but may not display properly on much older or obscure browsers.

Because the vast majority of people use current, mainstream browsers, Baseline Optimized is usually considered the better option.

Progressive JPEGs

On the other hand, JPEGs saved in progressive mode will show the entire full-sized image all at once. However, because the image data does not load all at once, the image will at first be blurry and then become more clear as it loads.

Example of how a Progressive JPEG may progressively load over time. Image from liquidweb.com

You have probably experienced this from time to time. One example is that the Facebook photo viewer displays images progressively.

Notably, it is possible to switch the JPEG format of an image between the Baseline and Progressive formats without any loss of quality, because the only technical difference is how coefficients are placed in the file. You can read way more about coefficients and encoding here if you really want to.

Are Progressive JPEGs Better Than Baseline?

One type of JPEG is not necessarily better than the other, though people have a lot of opinions on the subject.

Whether a JPEG is saved as Baseline or Progressive is of course more noticeable when downloading high resolution images, or if you have a slow Internet connection, because typically you’ll have at least a couple seconds of delay before the data is completely downloaded.

In these cases, one school of thought is that progressive JPEGs are better for usability because they provide a full “preview” of the image that allows the user to get a feel for the overall size and content of the image before it is fully downloaded. However, this probably isn’t much of an issue unless the file size is huge to begin with.

Others believe that seeing an initially blurry version of a photo could cause the user to have a negative opinion of the website, and even navigate away without realizing that the image is still downloading.

Though the final image is the same regardless, Progressive JPEGs tend to be smaller in terms of file size. However, they also tend to take 2.5 times longer to display as compared to Baseline JPEGs, which kind of cancels out any file-size advantage that Progressive JPEGs had going for them.

Conclusion: Progressive JPEGs are Useless

In general, I don’t think it is worth it to worry about which JPEG format to use. Most people’s Internet connections are fast enough that the images will load almost instantly anyway. The exception, of course, is when dealing with very large images.

I may be in the minority, but I am more likely to navigate away from a blurry image that may or may not be done downloading than an image that is clearly loading sequentially line-by-line and just needs a few seconds longer.

The worst is when you are looking through Google Images and linger too long on a blurry image that you think is still loading...but it never does. Progressive JPEGs are to blame for this ambiguity and the waste of your precious seconds.

Though some people like the full-size pixelated preview, I’d prefer to just view the final image when it’s ready than have access to a blurry photo of garbage sooner.

#rantcomplete #hugecontroversy #comeatmeprogressives

Additional Sources

General

Other Interesting Information & Opinions

Users Who Have Downloaded More RAM:
August R. Garcia (2 months ago)
🐏 ⨉ 1
Posted by Louis J. V. Cicalese 2 months ago

Edit History

• [2019-03-14 13:14 PDT] Louis J. V. Cicalese (2 months ago)
• [2019-03-14 13:14 PDT] Louis J. V. Cicalese (2 months ago)
• [2019-03-14 13:14 PDT] Louis J. V. Cicalese (2 months ago)
🕓 Posted at 14 March, 2019 13:14 PM PDT

Profile Photo - Louis J. V. Cicalese Louis J. V. Cicalese
🗎 52 🗨 56 🐏 51
Staff

Louis Cicalese is a person who has written about the hacker known as 4chan, the hacker known as 2channel 5channel, lesser-known search engines, CSS color namesLeeroy Jenkins, hiring Kermit the Frog impersonators and various other topics.


Account created 5 months ago.
52 posts, 56 comments, and 51 RAMs.

Last active 6 days ago:
Commented in thread What is Rollback Rx Pro? | An Instant Time Machine For Your Computer

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 136 🗨 711 🐏 166
Site Owner

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 2 months ago 🕓 Posted at 15 March, 2019 06:55 AM PDT

The CIA wants all code in the cloud under their lock and key. They want to ban compilers and make people think HTML is computer programming. - Terry A. Davis

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.