Estou fazendo um site responsivo e gostaria de carregar diferentes imagens no background dependendo do dispositivo. Vou respeitar o uso de dados de usuários mobile e não quero forçar o carregamento de uma imagem 1920x500 por exemplo.
Se eu usar media queries no CSS (como representado abaixo) o que acontece exatamente?
A) Ambas as imagens são carregadas mas apenas uma é mostrada;
B) Apenas a imagem que se encontra na condição da tela do usuário é carregada;
C) [outra resposta?]
@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");
}
}