Is a background loaded even when a rule is not applied to an element?


I do not know if the title of the question is clear, I will try to explain as clearly as possible. I'm studying about responsive sites and I try my best not to use large images so the site does not stay slow. I saw that I can create different size versions of an image and depending on the size of the device, put them in an object.

So, instead of loading an image with 5000px in width and resizing it according to the size of the element in this way:

#elemento {
  background-image:url('imagem.png'); /* Imagem com 5000px de largura */

I can do this:

@media screen and (max-width: 600px) {
  #elemento {
    background-image:url('imagem600.png'); /* Imagem com 600px de largura */

@media screen and (max-width: 900px) {
  #elemento {
    background-image:url('imagem900.png'); /* Imagem com 900px de largura */

@media screen and (max-width: 1300px) {
  #elemento {
    background-image:url('imagem1300.png'); /* Imagem com 1300px de largura */

The question

When having a device with 900px wide, only the corresponding image will load or will all be downloaded? If all of them are downloaded, is there any way for the user that has a small device not to download a very giant image unnecessarily?

asked by anonymous 02.04.2015 / 20:07

1 answer


The behavior varies from browser to browser, although it is constantly improving.

A very interesting article:

Media Query & Asset Downloading Results

In English, published 10-04-2012

And with relatively exhaustive tests, we can see that to avoid downloading multiple images when we are only going to present one, the ideal technique is to define the image in the various declarations @media :

As you have your CSS declarations, only one image is downloaded because the one declared in the @media in use subscribes to the need of the others.

02.04.2015 / 20:43