A <picture>tag HTML5 ajudará você a resolver a fonte de imagem correta, dependendo da largura da tela
Aparentemente, o comportamento dos navegadores não mudou muito nos últimos 5 anos e muitos ainda baixariam as imagens ocultas, mesmo que houvesse uma display: nonepropriedade definida nelas.
Mesmo que haja uma solução alternativa para consultas de mídia , ela só poderia ser útil quando a imagem foi definida como plano de fundo no CSS.
Enquanto eu pensava que havia apenas uma solução JS para o problema ( carregamento lento , preenchimento de fotos etc.), parecia que havia uma boa solução HTML pura que sai da caixa com o HTML5.
E essa é a <picture>etiqueta.
Veja como o MDN o descreve:
O elemento HTML<picture> é um contêiner usado para especificar vários <source>elementos para um específico <img>contido nele. O navegador escolherá a fonte mais adequada de acordo com o layout atual da página (as restrições da caixa em que a imagem aparecerá) e o dispositivo em que será exibido (por exemplo, um dispositivo normal ou hiDPI).
E aqui está como usá-lo:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
A lógica por trás
O navegador carregaria a fonte da imgtag, apenas se nenhuma regra de mídia se aplicar. Quando o <picture>elemento não é suportado pelo navegador, ele volta a mostrar a imgtag.
Normalmente, você colocaria a menor imagem como fonte <img>e, portanto, não carregaria as imagens pesadas para telas maiores. Vice-versa, se uma regra de mídia se aplicar, a fonte do <img>não será baixada; em vez disso, fará o download do conteúdo do URL da <source>tag correspondente .
A única armadilha aqui é que, se o elemento não for suportado pelo navegador, ele carregará apenas a imagem pequena. Por outro lado, em 2017, devemos pensar e codificar na primeira abordagem móvel .
E antes que alguém saísse muito, aqui está o suporte atual do navegador para <picture>:
Navegadores de desktop
Navegadores para celular
Mais sobre o suporte ao navegador, você pode encontrar em Posso usar .
O bom é que a frase do html5please é usá-lo com um fallback . E eu pessoalmente pretendo seguir o conselho deles.
Mais sobre a tag que você pode encontrar na especificação do W3C . Existe um aviso, que eu acho importante mencionar:
O pictureelemento é um pouco diferente dos elementos videoe aparência semelhantes audio. Embora todos eles contenham sourceelementos, o srcatributo do elemento de origem não tem significado quando o elemento está aninhado em um pictureelemento e o algoritmo de seleção de recurso é diferente. Além disso, o picturepróprio elemento não exibe nada; apenas fornece um contexto para seu imgelemento contido que permite escolher entre vários URLs.
Então, o que diz é que ele apenas ajuda a melhorar o desempenho ao carregar uma imagem, fornecendo algum contexto para ela.
E você ainda pode usar um pouco de magia CSS para ocultar a imagem em pequenos dispositivos:
<style>
picture { display: none; }
@media (min-width: 600px) {
picture {
display: block;
}
}
</style>
<picture>
<source srcset="the-real-image-source" media="(min-width: 600px)">
<img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>
Portanto, o navegador não exibirá a imagem real e fará o download apenas da 1x1imagem em pixel (que pode ser armazenada em cache se você a usar mais de uma vez). No entanto, esteja ciente de que, se a <picture>tag não for suportada pelo navegador, mesmo nas telas do descktop, a imagem real não será exibida (portanto, você definitivamente precisará de um backup de polyfill).
