6

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

easwee
  • 15,757
  • 24
  • 60
  • 83
Adrian Payne
  • 165
  • 2
  • 12

2 Answers2

10

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');
easwee
  • 15,757
  • 24
  • 60
  • 83
  • Just curious: is that "under" as in multiple background images as per CSS3? (Admittedly I've never thought about load order there.) – Ulrich Schwarz Feb 18 '14 at 12:09
  • @UlrichSchwarz - No - I mean like two nested divs - or load compressed background on `` and than load full ress on ``. – easwee Feb 18 '14 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. – Adrian Payne Feb 18 '14 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. – easwee Feb 18 '14 at 12:18
  • @UlrichSchwarz Added sample html for first workaround. – easwee Feb 18 '14 at 12:19
  • 1
    @easwee: FYI, using multiple backgrounds for this seems to work (in FF 24 and Opera 12.15): `
    ` shows my local lo-res version until the other one is completed, so the requests are parallel. The [standard says](http://www.w3.org/TR/css3-background/#the-background-image) an agent is allowed to be clever and not load images hidden behind opaque images, though     – Ulrich Schwarz Feb 18 '14 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. – easwee Feb 18 '14 at 12:48
  • The workarounds are good solutions, though the multiple background options do add more blocking time :) – Adrian Payne Feb 18 '14 at 13:00
  • 1
    I hope other browsers catch up with Chrome on this functionality, but I'll accept this as the answer :) – Adrian Payne Feb 18 '14 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');` – sagesolutions Oct 18 '18 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/

Terryfrancis
  • 135
  • 1
  • 12
  • (Im guessing that the reason behind loading progressively is for better load time) – Terryfrancis Feb 18 '14 at 11:55
  • 1
    (Correct ^^) Would hope that if there is a solution, it doesn't require a plugin or library either. – Adrian Payne Feb 18 '14 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. – easwee Feb 18 '14 at 12:00