Progressive JPG background image trouble in Firefox

Asked 18/2, 2014 at 9:44 Answered 18/2, 2014 at 11:58

Solved css firefox background-image jpeg progressive

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

Lovettalovich answered 18/2, 2014 at 9:44 Comment(0)

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

Yoakum answered 18/2, 2014 at 11:58 Comment(10)

Just curious: is that "under" as in multiple background images as per CSS3? (Admittedly I've never thought about load order there.) – Seismology 18/2, 2014 at 12:9

@UlrichSchwarz - No - I mean like two nested divs - or load compressed background on <html> and than load full ress on <body>. – Yoakum 18/2, 2014 at 12:14

Yep Workaround 2 crossed my mind and is likely the solution I'll have to go with here. Do you know if this is "bugged" with the FF team already? I couldn't find anything. – Lovettalovich 18/2, 2014 at 12:15

@AdrianPayne - I did find a few bug tickets related to it on bugzilla, that have been reopened and closed a few times, but I'm not sure about the latest status of it, since navigation on bugzilla is pure hell - would have to take some more time to go trough all those logs. – Yoakum 18/2, 2014 at 12:18

@UlrichSchwarz Added sample html for first workaround. – Yoakum 18/2, 2014 at 12:19

@easwee: FYI, using multiple backgrounds for this seems to work (in FF 24 and Opera 12.15):

<div style="width:1000px;height:686px;background-image: url('http://easwee.net/code-samples/jpgProgressive/progressive.jpg'),url('progressive.jpg');"></div>

shows my local lo-res version until the other one is completed, so the requests are parallel. The standard says an agent is allowed to be clever and not load images hidden behind opaque images, though – Seismology 18/2, 2014 at 12:46

@UlrichSchwarz - ofcourse it works - but the workaround I've posted will work in IE6 too. However will add it as CSS3 example. – Yoakum 18/2, 2014 at 12:48

The workarounds are good solutions, though the multiple background options do add more blocking time :) – Lovettalovich 18/2, 2014 at 13:0

I hope other browsers catch up with Chrome on this functionality, but I'll accept this as the answer :) – Lovettalovich 18/2, 2014 at 16:14

For Workaround 3, you need the high quality one first, so it should be background-image: url('high_quality.jpg'), url('extremely_compressed.jpg'); – Cabala 18/10, 2018 at 14:51

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

Rosinski answered 18/2, 2014 at 11:54 Comment(3)

(Im guessing that the reason behind loading progressively is for better load time) – Rosinski 18/2, 2014 at 11:55

(Correct ^^) Would hope that if there is a solution, it doesn't require a plugin or library either. – Lovettalovich 18/2, 2014 at 11:59

The whole point of the question was to find out if progressive image loading is working in css. An image loader does not benefit you in any way in this case, since the image will still have to be loaded and would be invisible until than. – Yoakum 18/2, 2014 at 12:0

Recommended topics

Hot tags