Mobile app version of vmapp.org
Login or Join
Gonzalez347

: "Progressive" JPEG: Why do many web sites avoid rendering JPEGs that way? Pros, cons? When JPEG images are used by a web page, they are typically rendered top-down ... but they can also be

@Gonzalez347

Posted in: #Images #Jpeg

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?

10.08% popularity Vote Up Vote Down


Login to follow query

More posts by @Gonzalez347

8 Comments

Sorted by latest first Latest Oldest Best

 

@Courtney195

For sites like Wikipedia that actually render their own thumbnails on the fly, there's an additional consideration: all the algorithms for creating progressive JPEGs take more memory and CPU cycles. When the original files are large enough, this creates problems.

10% popularity Vote Up Vote Down


 

@Cugini213

Progressive JPEG works in Chrome, Firefox, and IE 9+. I think that covers most browsers being used today to use the web.

Progressive JPEG provides a better user experience in many situations. I like to see progressive when visiting a slow site (island country, slashdot effect, peak traffic, etc). I don't need to see fully quality right away. An initial idea of the image is often good enough. It annoys me more to see a slow loading top to bottom image. It reminds me of the 300 baud modem days of downloading ASCII art.

10% popularity Vote Up Vote Down


 

@Alves908

Many libraries don't offer it at all, or not by default. But that's not the reason. I run a website offering images and I hate the progressive JPEGs. Why? Because the algorithm used in them is worse than my own! I use the same technique as Google, plus I actually overlay a medium thumbnail over the small one. This way, the user gets almost the full quality instantly on any connection no matter how huge the original was. The progressive files get very blocky, ruining this effect.

Thumbnail overlay is the way to do it.

10% popularity Vote Up Vote Down


 

@Rivera981

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

10% popularity Vote Up Vote Down


 

@Dunderdale272

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.

10% popularity Vote Up Vote Down


 

@Berumen354

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.

10% popularity Vote Up Vote Down


 

@Angie530

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.

10% popularity Vote Up Vote Down


 

@Dunderdale272

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme