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 */
  background-size:100%;
  width:100%;
}

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?