Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
1  
Whatever happened to interlaced gifs too? –  delete Jul 10 '10 at 1:24
6  
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] –  Mark Henderson Jul 11 '10 at 4:04
1  
I like the infinite-enhance zoom-in algorithm used in Blade Runner. –  Chris W. Rea Jul 11 '10 at 14:57
3  
@Chris, that's nothing compared to the software in Red Dwarf. –  Peter Taylor Sep 10 '11 at 10:28
    
@PeterTaylor That's awesome :-) –  Chris W. Rea Sep 10 '11 at 12:19

7 Answers 7

up vote 12 down vote accepted

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.

share|improve this answer
    
broken link, please update –  Timo Huovinen Nov 19 '12 at 18:34
    
@TimoHuovinen I've added a link to the original page as archived by the Internet Archive –  artlung Nov 19 '12 at 22:25

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.

share|improve this answer
5  
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. –  John Jul 26 '12 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 Jul 31 '12 at 16:57

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.

share|improve this answer
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 Feb 12 '13 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. –  sunk818 Sep 11 at 7:39

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

share|improve this answer

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.

share|improve this answer
2  
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 Feb 12 '13 at 10:50
    
Progressive JPEG is also good for island countries where bandwidth is limited and latency is high. –  sunk818 Sep 11 at 7:41
    
But still progressive rendering shouldn't be avoided. –  Bhavesh Gangani 2 days ago

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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