CSS - Media Queries loading backgrounds. How do they behave?

I'm making a site responsive and would like to load different images in the background depending on the device. I will respect the use of mobile user data and do not want to force the loading of a 1920x500 image for example.

If I use media queries in CSS (as represented below) what exactly happens?

A) Both images are loaded but only one is shown;

B) Only the image that is in the condition of the user's screen is loaded;

C) [other answer?]

@media screen and (min-width: 768px) {
    #divFundo {
        background-image: url("../images/imagem_grande.png");
    }
}
@media screen and (max-width: 768px) {
    #divFundo {
        background-image: url("../images/imagem_pequena.png");
    }
}