1

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");
    }
}

1 Resposta 1

0

Olha, vou fazer melhor que te responder diretamente. Experimente abrir esta página no google Chrome com o console aberto. Vá para a aba network, selecione "IMG".

Esta tela irá te mostrar na ordem tudo o que está sendo baixado para a máquina do cliente. Nela você verá se as imagens foram carregadas ou não.

Dica: Feito isso, faça novamente, mas pressionando CTRL + F5, para forçar o navegador a baixar tudo novamente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .