129

Are unused CSS images downloaded by the browser or ignored?

Eg. in CSS rules which don't match any elements.

.nothingHasThisClass{background:url(hugefile.png);}

Or would this be browser-dependant?

Alex
  • 1,568
  • 2
  • 11
  • 15

7 Answers7

91

This would be browser dependent, since it's how they decide to implement the spec, however in a quick test here:

  • Chrome: Doesn't
  • FireFox: Doesn't
  • Safari: Doesn't
  • IE8: Doesn't
  • IE7: Doesn't
  • IE6: Unknown (Can someone test and comment?)
Ash
  • 60,973
  • 31
  • 151
  • 169
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 1
    I'm assuming that you've tested on Windows? If you'd like to add cross-platform comparisons then I can offer that Firefox 3.6.x and Chrome 5.0.307.11 (Ubuntu 9.10) also **don't**. =) – David Thomas Mar 07 '10 at 16:22
  • Aha, I see. I thought it would be quite poor for firefox, chrome and safari to load them, but I wouldn't have put it past IE. Is this result the same for IE 6 and 7? – Alex Mar 07 '10 at 16:24
  • @Alex - IE7 Yes, though a more complex page might trick it? IE6 I can't test where I am...maybe someone here can and update my answer. – Nick Craver Mar 07 '10 at 16:27
  • 51
    Can I file a protest against testing anything in IE6? – Dave Markle Mar 07 '10 at 16:32
  • @Dave - I'm not sure anyone will test and comment...if so I'll update. Since there's an unspoken requirement of bleaching your eyes after looking at IE6...... – Nick Craver Mar 07 '10 at 16:42
  • Sadly, some people just can't let their beloved IE6 go (about 20%). – Alex Mar 07 '10 at 16:51
  • 2
    @Dave: Everything should be tested in IE6 (the unFaithful departed) , if it runs correctly there, and it will in every goddamn browser :P – N 1.1 Mar 07 '10 at 16:51
  • I don't think anyone wants to test it in IE6 because that would require them *admitting* they still use it. – gnovice Mar 07 '10 at 17:47
13

No, they are not downloaded, not at least in Firefox, IE8 and Chrome.

An easy way to test this:

<!DOCTYPE html>
<html>
    <head>
       <style type="text/css">
        .nonexistent {
            background: url('index.php?foo');
        }
        </style>
    </head>
    <body>
<?php if(isset($_GET['foo'])) {
    file_put_contents('test.txt', $_SERVER['HTTP_USER_AGENT']);
} ?>
    </body>
</html>

If test.txt is populated with the browser's user agent, then the image is downloaded. This was not the case in any of my tests.

Tatu Ulmanen
  • 123,288
  • 34
  • 187
  • 185
9

A quick test proved it. 

<!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css"><!--

.hasnothing{background-image:url(http://25.media.tumblr.com/tumblr_ky7aakqvH01qatluqo1_400.jpg);}
.hassomething{background-image:url(http://27.media.tumblr.com/tumblr_kxytwr7YzH1qajh4xo1_500.png);}

--></style>

</head><body>

<div class="hassomething"></div>

</body></html>

The 2nd image, tumblr_kxytwr7YzH1qajh4xo1_500.png, was downloaded but not the other one. This was proven true in Chrome (Developer tools) and Firefox (Firebug).

mauris
  • 42,982
  • 15
  • 99
  • 131
8

Firefox and Chrome (Ubuntu 9.10) don't download images for classes/ids that aren't applied in the DOM.

This may be both platform and browser dependant, though.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
3

Sometimes, it depends just exactly what "unused" means. Different browsers define it differently. For example, in Firefox, styles applied to the <noscript> tag are deemed "unused" and thusly, any images won't be downloaded.

Chrome 26 (possibly all of them, not sure), does download CSS images if they are applied to the <noscript> element, even when JS is enabled. (It isn't immediately clear to me why though, perhaps this is a bug?).

It does not download CSS images applied to elements within the <noscript> element, though. (this is expected behaviour, of course).

Example:

CSS:

noscript { background-image: url('always.png') 0 0 repeat; }
noscript p ( background-image: url('nojsonly.png') 0 0 repeat; }

HTML:

<noscript>The CSS background image of this NOSCRIPT-element will always be downloaded in Chrome.  Will not be downloaded in Firefox</noscript>
<noscript><p>The CSS background image of this P-element won't be downloaded in Chrome or other browsers, unless JS is disabled</p></noscript>

In this case, if the user has JS-enabled, both always.png and otherbg.png are downloaded in Chrome. If the user does not have JS enabled, then only nojsonly.png is downloaded in Chrome.

I use this technique for measuring traffic-levels from non-JS-enabled users, as Google Analytics fails us here. I prefer using the background CSS image rather than a normal <img...> tag, because I'm working under the (untested) theory that bots are less likely to grab a CSS image than a <img...> image, leaving more accurate counts for the human-visitors.

mkoistinen
  • 7,724
  • 3
  • 41
  • 56
2

Almost all browsers do lazy-loading. If an image is not required, it does not download. Use firebug (add-on in Firefox/Chrome) to see load time for resources.

N 1.1
  • 12,418
  • 6
  • 43
  • 61
-1

Interestingly, though, Chrome (at least) will download unused.png in the following example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>test</title>
        <style type="text/css">
            .unused {
                background: url(unused.png) no-repeat;
            }
            .used {
                background: url(used.png);
            }
        </style>
    </head>
    <body>
        <div class="unused used">
            hello world
        </div>
    </body>
</html>
eentzel
  • 171
  • 4
  • 11
    Well, that's because it's referenced. So I'm not sure calling it "unused" is really valid.. – NotMe Jun 14 '10 at 22:55
  • @eentzel, please remove "unused" from the div, redo the test and tell us your result. – Anse Jan 29 '18 at 12:29