"Progressive" JPEG: Why do many web sites avoid rendering JPEGs that way? Pros, cons?

Question

When JPEG images are used by a web page, they are typically rendered top-down ... but they can also be rendered using a mode called progressive JPEG, where the image starts out full-size, but blurry, and then gets sharper with successive passes, until it's fully loaded. Progressive loading requires the image have been saved that way.

Why don't more web sites use progressive JPEG? What are the drawbacks? Is it simply a lack of tool support, or are these files somehow inferior to traditional top-down rendered JPEG images?

Solution 1

Progressive JPEG has had scattershot support since inception. The Wikipedia page on JPEG says:

However, progressive JPEGs are not as widely supported,^{[citation needed]} and even some software which does support them (such as versions of Internet Explorer before Windows 7)^[12] only displays the image after it has been completely downloaded.

N.B. The first statement is unsourced, and the source for the second does not necessarily say that this is only supported in Windows 7.

I can't remember when I first avoided Progressive JPEG, but the most recent issue was that the image parsers in Flash (which can load PNGs, GIFs, and JPEGs) can't load Progressive JPEG (Updated Link on Internet Archive) either.

Solution 2

I usually save images as progressive.

I have never experienced or heard of drawbacks or rendering problems. And even if some very old browser might not render the progressive effect, they still finally render the image, so it is not a big issue.

Progressive JPEG images are usually smaller in size than the same image without progressive.

For example, an 8K (max quality) JPG image could easily become a 6K (still max quality) when progressive is adopted and without losing a pixel of definition.

Moreover, with image editors like Photoshop, saving an image as JPG progressive takes nothing (it's just a checkbox in the window that appears when using the "Save As" command), so I usually do it.

Solution 3

Artlung covered some support considerations, but there's also the fact that it's just not going to matter most of the time. The important bit in the question is "until it's fully loaded." The progressive format isn't an aesthetic nicety that makes the image blur in, it's functional:

If an image is large enough(by filesize) that it take a while to download, then you'll see the progression.
Even if every JPEG everywhere were saved as progressive, at current common connection speeds the overwhelming majority of images you're going to encounter just aren't large enough that you'd ever see the effect to any significant degree. This was a great idea back when everybody was on slow phone modems, but is increasingly a curiosity of limited practical application beyond sites that really do require very large images like a picky photographer or something.

The same goes for interlaced GIFs, since someone tacked them on in the comments.

There's a potential audience factor here, say if you consider countries with a less-developed net infrastructure where they may get significantly slower speeds, but I can't speak to that. I could see them as possibly having some application for mobile browsing, but then we loop back to the spotty support for the feature.

Solution 4

Google uses progressive-like loading of their images in images.google.com At first they stretch thumb to preview dimensions and then they load original image over. I think that is a good practice. Just like Progressive JPEG

Solution 5

Progressive rendering (gif/jpeg) was for the good old days of the internet where servers were slow and final mile data transfer was done at a crawl through POTS. Nobody wastes time on it anymore.

So many of my website audience is on broadband that it serves no purpose other than a minimal fade in effect on a very large image (though on 8MB cable, it's hardly noticeable). If your audience is still on Dial-up telephone, you might want to worry about it.

And as is pointed out in the comments below, what is old is new and the new final mile transfer speed is still an issue for mobile phone network and satellite access due to either link speed or latency issues. So pay attention to your audience and re-implement it for better user experience where you need it.

View more solutions

Comments

[Admin]

Whatever happened to interlaced gifs too?

[Admin]

They were a great suspense builder in circa-1990 films, waiting for the image to load, oh its a bit less blocky, ok we can almost see the killers face... BAM [cut to dramatic action sequence]

[Admin]

I like the infinite-enhance zoom-in algorithm used in Blade Runner.

[Admin]

@Chris, that's nothing compared to the software in Red Dwarf.

[Admin]

@PeterTaylor That's awesome :-)

[Admin]

this article [link] (calendar.perfplanet.com/2012/…) touts progressive images as better for page load

[Admin]

Nice video of progressive jpeg loading and discussion about interlaced gifs here jwz.org/blog/2018/07/low-bandwidth-makes-arty-jpegs

[Display Name]

Indeed, yuiblog.com/blog/2008/12/05/imageopt-4 found that 94% of JPEGs larger than 10K compress better (smaller) when progressive (it's different for small files though, as 75% of JPEGs smaller than 10K compress better without progressive mode). So it's generally a good idea to save large JPEGs as progressive.

[joelpittet]

I agree with John, if you bring the quality down from max quality to very high (80%-90%) or lower you will see that progressive no longer yields a smaller size.

[Baumr]

I think that mobile is actually a big consideration here — I am guessing that new smartphone support it; and it'll make browsing experience on 3G or slower speeds much better — if you see images that are irrelevant loading, you can leave before you waste more time or money

[Baumr]

You're neglecting mobile 3G connections — those can be slow; it will depend if people on those visit your site, but the market and usage is really growing in general

[Sun]

A mobile browser could have a setting to display only the first or second pass of a progressive JPEG by default. This will save on data and provide a faster browsing experience.

[Sun]

Progressive JPEG is also good for island countries where bandwidth is limited and latency is high.

[Bhavesh G]

But still progressive rendering shouldn't be avoided.

[Kristian Damian]

But using Flash is evil! ;-)

[user2827904]

You can't know for sure that the 6K and 8K images are of the same quality. It's the maximum setting and the reduction will be invisible. I suspect that the smaller file will be more lossy. There is no way the progressive algorithm could be 25% more efficient. If anything, it should be less efficient because it adds a layer of separation to correlated compressed data.

[user2827904]

Baumr: No, the CPU cost is too high; my phone actually doesn't even partially draw a regular image, it waits for the full load before even displaying.

[user2827904]

sunk818: While theoretically possible, it would be a cross-layer hack. You would have to parse the JPEG in the TCP part of the stack and interrupt the transfer early... Terrible. And it would break pipelining too. And most JPEG libraries would refuse to work with such file, so you'd have to use a homebrew hack too! Just no.

[Paul Phillips]

Yes, it's less which region of the world these days then if you are on 2G or 3G. Just had a user from Barundi load a page that is 3-8s globally from a wired desktop complete in 115s from a 2G mobile connection. It can still be a slow world on mobile.

[theflowersoftime]

60% of Chrome connections are 2G - Chrome Dev Summit 2016.