Are unused CSS images downloaded?

Solution 1:

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?)

Solution 2:

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.

Solution 3:

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

Are unused CSS images downloaded?

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts