Overriding `background-image` with a smaller image for smaller devices in css, will save bandwidth or reduce loading time?

Question

Let's say I did this:

@media only screen and (min-width: 1366px)
    .someBg {
         background-image: url('someBg_BIG.jpg');
    }
}

Now override the background image like this:

@media only screen and (max-width: 480px)
    .someBg {
         background-image: url('someBg_SMALL.jpg');
    }
}

Question: For devices below 480px - Will the css first override the class then load only the overridden image? Or will it first load both the images and then decide which one will have more precedence?

Answer 1

When you use @media only appropriate images will be loaded. If resolution more than 768px (for example) only one image will be loaded. If resolution less than 768px only one image will be loaded too. But if you resize window from 800px to 500px both images will be loaded. You can check it in Chrome inspector.

img {
  width: 400px;
  content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg");
}

@media screen and (max-width: 768px) {
  img {
    content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg");
  }
}

<img alt="">