Design responsivo – Media Queries – Como não carregar determinadas imagens

Question

Ok, então projetei um layout responsivo que não mostra imagens para telas muito pequenas, usando consultas de mídia e display: none;.

Até agora tudo bem.Mas essas imagens ainda são baixadas nesses dispositivos, causando um aumento na largura de banda.

Qual é a maneira correta de fazer com que essas imagens não sejam baixadas nos dispositivos especificados?

Qualquer resposta seria muito apreciada!

Answer 1

A única solução acessível no momento é envolver a imagem com <noscript> tags e, em seguida, extraia a imagem mais tarde com javascript. Os cookies não funcionam no carregamento da primeira página (HTMLPreloadScanner) nem com CDNs.A detecção do navegador é inútil se suas imagens nem sempre estiverem 100% da janela de visualização.

Slimmage.js implementa imagens responsivas amigáveis ​​ao contexto em 3 KB de Vanilla JS.

A marcação também é bastante simples:

<noscript data-slimmage>
  <img src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>

Claro, você pode criar um auxiliar do lado do servidor para abstrair isso.

Answer 2

Duas opções em que posso pensar:

1. Detecte pequenos dispositivos no servidor usando detecção de navegador e envie-lhes HTML diferente que não faça referência às imagens.
2. Exiba as imagens via CSS em vez de HTML (em style atributos, se desejar), usando background-image ou :before/:after e content (não suportado pelo IE 6 ou 7) e agrupar esse código CSS em consultas de mídia para que seja exibido apenas em dispositivos com telas maiores.

Answer 3

Se você não se importa com uma dependência de javascript, você pode verificar window.innerWidth e insira tags de imagem para telas suficientemente grandes.

As imagens só seriam solicitadas se o javascript estivesse habilitado e a janela fosse grande o suficiente.

Answer 4

Se você não tiver problemas ao usar JavaScript adicional, você pode tentar ESSE.Eu me deparei com isso enquanto pesquisava e aprendia sobre consultas de mídia.