5

Não sei se o título da pergunta é clara, vou tentar explicar o mais claramente possível. Eu estou estudando sobre sites responsivos e tento ao máximo não usar imagens grandes para o site não ficar lento. Vi que posso criar versões de tamanhos diferentes de uma imagem e dependendo do tamanho do dispositivo, colocá-las em um objeto.

Assim, ao invés de carregar uma imagem com 5000px de largura e fazer ela se redimensionar de acordo com o tamanho do elemento dessa forma:

#elemento {
  background-image:url('imagem.png'); /* Imagem com 5000px de largura */
  background-size:100%;
  width:100%;
}

Eu posso fazer isso:

@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 */
  }
}

A pergunta

Ao ter um dispositivo com 900px de largura, somente a imagem correspondente irá carregar ou todas irão ser baixadas? Se todas forem baixadas, tem alguma forma para o usuário que tenha um dispositivo pequeno não tenha que baixar uma imagem muito gigante desnecessariamente?

6
  • 1
    Só é "baixada" a imagem indicada na @media que corresponde ao ecrã do visitante porque só o conteúdo dessa @media é que vai ser lido!
    – Zuul
    2/04/2015 às 18:10
  • Então a imagem só irá ser baixada caso um usuário que esteja usando um computador redimensionar a janela? Logo, não existe a possibilidade de por exemplo, alguém que esteja acessando o site por um celular baixar 5mb em imagens, certo? 2/04/2015 às 18:13
  • ..... Certo! .....
    – Zuul
    2/04/2015 às 18:16
  • Os pontinhos no comentário anterior é só porque o sistemas não deixa comentar com tão poucos caracteres. Este comentário é só para chatear até alguém apagar!
    – Zuul
    2/04/2015 às 18:17
  • 1
    Vou responder, estou a elaborar o assunto em maior detalhe para clarificar algumas coisas associadas a este tema. Entretanto também outras respostas poderão surgir para melhor clarificar a duvida :)
    – Zuul
    2/04/2015 às 18:20

1 Resposta 1

4

O comportamento varia de navegador para navegador, embora seja algo em constante melhoria.

Um artigo muito interessante:

Media Query & Asset Downloading Results

Em Inglês, publicado em 10-04-2012

e com testes relativamente exaustivos permite-nos apurar que para evitar o download de múltiplas imagens quando só vamos apresentar uma, a técnica ideal é definir a imagem nas diversas declarações @media:

Captura de tela (alterada)

Da forma que tens as tuas declarações de CSS, só uma imagem é descarregada porque a declarada na @media em uso subscreve a necessidade das outras.

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 .