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

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      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.

Workaround 2: Since Firefox does support progressive loading on tag, you could try setting the 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');