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

Answer 1

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/

Answer 2

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');