Using Media Query with different images for different resolutions, which images will be requested?

Question

When I use different images with media query, the user’s browser will use which option?

• Order all images from the site and use the appropriate one (making loading slower).
• Request only the specific media query image (making loading faster).

An example of code below.

.container {
  background-image: url('imagem-menor.jpg');
}


@media only screen and (max-width: 400px) {
  .container {
    background-image: url('imagem-maior.jpg');
  }
}