Progressive JPG background image trouble in Firefox

Question

Quick question on progressive JPG backgrounds, if anyone knows.

It appears that Firefox ignores the "progressiveness" of JPEGs if they are set as CSS backgrounds and waits until the image is fully loaded until displaying. I have Chrome and IE loading the background images progressively but Firefox just pops them in at full quality.

I'm seeing the proof in front of me , but finding little to no info on it online. Just unanswered forum questions here and there.

Anyone know anything about this? Is it a bug Mozilla know about or what is going on?

Edit: Test case provided by easwee http://sample.easwee.net/jpgProgressive/index.html

Answer 1

I went digging in since I am working on a similar problem at the moment.

Results from personal tests on this test case + Fiddler 2 to simulate slow modem speed:

                                 as HTML <img>     as CSS background
Firefox (ver 25.0.1)             works             no support
Chrome (ver 32.0.1700.107 m)     works             works
Safari (windows 5.1.7)           no support        no support

Seems to me from the tests (and from an extensive web search) that the only browser that currently supports progressive background images in CSS is Chrome.

Workaround: A nice workaround I've been using in cases where the image had to be visible before it finished loading the full size, is to load an extremely compressed image under the high resolution image. So you have the compressed graphic under the element until the full resolution graphic loads over it.

<div style="background:url(extremely_compressed.jpg);">
    <div style="background:url(high_quality.jpg);">
    </div>
</div>

Workaround 2: Since Firefox does support progressive loading on <img> tag, you could try setting the <img> to position:absolute (or fixed) and have it load behind the content with a lower z-index.

Wordaround 3 - CSS3: Use multiple background images if you don't need to support old browsers.

background-image: url('extremely_compressed.jpg'),url('high_quality.jpg');

Answer 2

Have you tried using a jquery plugin? Had a similar issue where I wanted the loading delayed to improve load time so used jquery to load image and override the browser.

Found this with after a quick search:

http://yuilibrary.com/yui/docs/imageloader/