42

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?

8
  • 2
    Whatever happened to interlaced gifs too?
    – delete
    Commented Jul 10, 2010 at 1:24
  • 7
    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] Commented Jul 11, 2010 at 4:04
  • 1
    I like the infinite-enhance zoom-in algorithm used in Blade Runner. Commented Jul 11, 2010 at 14:57
  • 3
    @Chris, that's nothing compared to the software in Red Dwarf. Commented Sep 10, 2011 at 10:28
  • @PeterTaylor That's awesome :-) Commented Sep 10, 2011 at 12:19

8 Answers 8

16

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.

3
  • 8
    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. Commented Jul 26, 2012 at 19:57
  • 1
    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.
    – joelpittet
    Commented Jul 31, 2012 at 16:57
  • 1
    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.
    – Zdenek
    Commented Oct 4, 2015 at 19:31
14

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.

1
  • But using Flash is evil! ;-) Commented Jan 15, 2015 at 11:24
6

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.

4
  • 1
    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
    Commented Feb 12, 2013 at 10:48
  • 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
    Commented Sep 11, 2014 at 7:39
  • 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.
    – Zdenek
    Commented Oct 4, 2015 at 19:42
  • 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.
    – Zdenek
    Commented Oct 4, 2015 at 19:44
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

1
  • I do that too. And my solution is even better because Google loads the full image hidden while I have it progressively drop across the low-quality version.
    – Zdenek
    Commented Oct 4, 2015 at 19:47
2

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.

5
  • 3
    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
    – Baumr
    Commented Feb 12, 2013 at 10:50
  • 1
    Progressive JPEG is also good for island countries where bandwidth is limited and latency is high.
    – Sun
    Commented Sep 11, 2014 at 7:41
  • But still progressive rendering shouldn't be avoided.
    – Bhavesh G
    Commented Oct 21, 2014 at 12:17
  • 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. Commented Oct 20, 2015 at 15:45
  • 60% of Chrome connections are 2G - Chrome Dev Summit 2016. Commented Nov 18, 2016 at 17:59
1

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.

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.