What Are Progressive JPEGs?
Published | Last Update
Probably JPEGs that advocate for equal rights and health care reform, amiright?
1,333 view, 1 RAM, and 1 comment
- JPEGs: You Know ‘Em You Love ‘Em
- JPEGs vs PNGs: Five Second Overview
- Baseline JPEGs
- Further Breakdown: Standard vs Optimized Baseline JPEGs
- Progressive JPEGs
- Are Progressive JPEGs Better Than Baseline?
- Conclusion: Progressive JPEGs are Useless
- Additional Sources
- Other Interesting Information & Opinions
- Related Articles
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.
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.
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
Other Interesting Information & Opinions
- Progressive JPEGs and green Martians - cloudinary.com
- Progressive JPEGs - How to improve website speed - thewebmaster.com
- Optimizing Images - bookofspeed.com
- The Ultimate WordPress Performance Resource
- The All-Time Best Keyboard Shortcuts for Chrome and Firefox (That Will Save Your Taxpayer Dollars)
- [HTML5] Presentational vs Semantic Elements
- [HTML5] How These Off-Brand Divs Help With SEO
- What is the Wayback Machine? | How the Internet Archive uses Web Crawlers to Preserve Internet History
- [Solved] CKEditor Autosave Draft Functionality - 1.4KB, No Plugin
- How to Make a Website: A Simple Guide for Complete Beginners
- 5 Tasks You Didn't Know Could be Done from the Developer Console
- The Ultimate WordPress Performance Resource
- How much is my website worth?
- GeneratePress: Total overview of what it can offer and why it's the only theme I use.
- DreamHost: Review, FAQ, and Affiliate Program
- Get These Dependencies Off My Lawn: 5 Tasks You Didn't Know Could be Done with Pure HTML and CSS
- How to Parse a User Agent in PHP with Minimal Effort
- Best PHP Frameworks
Sir, I can do you a nice SEO.
Post a New Comment
Do you like having a good time?
Register an Account
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.
Argue with People on the Internet
Use your account to explain why people are wrong on the Internet forum.
Vandalize the Wiki
Or don't. I'm not your dad.
Ask and/or Answer Questions
If someone asks a terrible question, post a LMGTFY link.
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.