While working on a responsive website the question came up whether CSS background images are being loaded by the browser if the element they are applied to is set to display: none;

My initial reaction was that I thought they will be loaded even though they aren’t rendered by the browser. After creating a test case on CodePen (see the code below), I was proven right – sadly. All CSS background images will be loaded by the browser no matter if they are rendered on the page or not.

BUT this isn’t true for Firefox, which is much smarter and always only loads the images that are actually rendered.

<div class="box box--s"></div>

<div class="box box--m"></div>

<div class="box box--l"></div>

.box {
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s {
  background: url(s.gif);
  
  @media (min-width: 499px) {
    display: none;
  }
}

.box--m {
  display: none;
  background: url(m.gif);
  
  @media (min-width: 500px) and (max-width: 799px) {
    display: block;
  }
}

.box--l {
  display: none;
  background: url(l.gif);

  @media (min-width: 800px) {
    display: block;
  }
}

Test it yourself with this CodePen.
Let’s have a look at what we can do to avoid loading unnecessary CSS background-images.

Instead of creating three different elements and using display: none; to hide them you can just change the background image according to media queries. This will only load the image that is actually displayed.

<div class="box box--s-m-l"></div>

.box {
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s-m-l {
  margin-bottom: 40px;
  background: url(s.gif);
  
  @media (min-width: 500px) {
    background: url(m.gif);
  }
  
  @media (min-width: 800px) {
    background: url(l.gif);
  }
}

CodePen Testcase.

In this special case this will work, but let’s say you have three boxes with different content and different background images and want to show either one according to viewport size, just using display: none; won’t do the trick. That’s sad, but it’s the way it is, at least for now.

What you can do is set all boxes to display: none; and only when the media query applies show the box and set the background image. This way you only load the image you are actually showing and you can have different boxes.

<div class="box box--s"></div>

<div class="box box--m"></div>

<div class="box box--l"></div>

.box {
  display: none;
  margin: 0 auto 10px;
  width: 100px;
  height: 100px;
}

.box--s {
  @media (max-width: 499px) {
    display: block;
    background: url(s.gif);
  }
}

.box--m {  
  @media (min-width: 500px) and (max-width: 799px) {
    display: block;
    background: url(m.gif);
  }
}

.box--l {
  @media (min-width: 800px) {
    display: block;
    background: url(l.gif);
  }
}

Try it with this CodePen.

Shaun Inman:

One line of JavaScript and a few mod_rewrite rules and we have no fuss Automatic Conditional Retina Images.

Shaun Inman posted a solution to automatically load retina images if you are using a retina device. His solution is to set a cookie and then automatically serve the 2x images with a fallback to the normal ones of course. Seems like a nice and easy way.

So far I only added retina images as background images and had no problem thanks to media queries. But this is a nice way for inline images like photographs without serving the big ones to a non-retina device.
Sadly it doesn’t work in Firefox at the moment.

Jake Archibald:

With base64 the image data is in the css file, meaning it gets downloaded even if it isn’t needed. Eg, if you’re using media queries to optimise image usage for mobile, base64 doesn’t help.

Jake Archibald makes some good points against Data URIs.

Nicholas C. Zakas:

CSS sprites were a solution to the problem of multiple HTTP requests to download multiple images. Data URIs allow you to embed images directly into your CSS files, solving the same problem in a much more elegant and maintainable way.

I hate working with sprites, but I do it because it is or should I say, was, the best way to increase the loading speed of images.
Since a few minutes ago I never heard of Data URIs, but it is great and I think I will try it out very soon. You should, too.