A background is loaded even when a rule is not applied over an element?

Asked

Viewed 39 times

5

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 websites and try my best not to use large images so the site doesn’t slow down. I saw that I can create versions of different sizes of an image and depending on the size of the device, place them on an object.

So instead of loading a 5000px wide image and making it resize according to the size of the element this way:

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

I can do it:

@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 a width of 900px, only the corresponding image will load or all will be downloaded? If all are downloaded, there is some way for the user who has a small device not to have to download a very giant image unnecessarily?

css
  • 1

    Only the "downloaded" image shown in @media which corresponds to the visitor’s screen because only the contents of that @media is going to be read!

  • So the image will only be downloaded if a user using a computer resizes the window? Therefore, there is the possibility of for example, someone who is accessing the site by a mobile phone download 5mb in images, right?

  • ..... Right! .....

  • The dots in the previous comment is only because the systems do not let comment with so few characters. This comment is just to piss people off!

  • Thank you very much, at least with this I should not worry anymore. Put as an answer to mark it!

  • 1

    I will reply, I am elaborating the subject in greater detail to clarify some things associated with this theme. However also other answers may arise to better clarify the doubt :)

Show 1 more comment

1 answer

4


The behavior varies from browser to browser, although it is something in constant improvement.

A very interesting article:

Media Query & Asset Downloading Results

In English, published on 10-04-2012

and with relatively exhaustive tests allows us to ascertain that to avoid downloading multiple images when we only present one, the ideal technique is to define the image in the various declarations @media:

Captura de tela (alterada)

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

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.