Quando vamos falar em imagens responsivas sempre vem em mente utilizar a técnica de redimensionamento no CSS onde deixamos o img com max-width:100% ( img{max-width:100%;}), mas sabemos que para performance mobile não existe ganho já que redimensionamos imagens grandes causando impacto de carregamento, e até um gasto a extra na franquia de dados.
É errado utilizar o redimensionamento, não, mas se você procura fazer um layout responsivo com performance é necessário que as imagens não só redimensionem mais também sejam trocadas por arquivos em formatos menores para mobile, reduzindo seu peso em kbytes e maiores para desktop, para que a imagem não estoure caso precise redimensionar mais do que seu tamanho natural.
Essa troca de imagens já pode ser feita através do HTML5 utilizando a tag <picture> e dentro informar o source srcset com a media querie para cada resolução, mas é claro temos o problema com o Internet Explorer que ainda não interpreta essas tags, neste caso a solução é utilizar o componente js Picturefill.js.
Com o Picturefill.js podemos utilizar as mesmas tags do HTML5 mas agora funcionando em todos os browsers exceto navegadores muito antigos como o IE 6 e 7 que no caso nem exibem as imagens.
Implementação
1. Insira o script na tag <head>, o script não funciona se você coloca ele no fim do documento.
<script src="js/picturefill.min.js" async=""></script>2. Insira a tag <picture> com as respectivas imagens em cada media querie, inclusive deixe o if do IE 9 ele é um hack para funcionar no IE9.
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="images/large.jpg" media="(min-width: 1400px)">
<source srcset="images/desktop.jpg" media="(min-width: 992px)">
<source srcset="images/tablet.jpg" media="(min-width: 600px)">
<source srcset="images/smartphone.jpg" media="(min-width: 320px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="images/smartphone.jpg" alt="">
</picture>Imagem de Retina
O componente também faz troca de imagem para imagens de retina. Basta informar a imagem normal com 1x e a imagem para a retina com 2x, veja o exemplo:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="images/large.jpg, images/large2.jpg 2x" media="(min-width: 1400px)">
<source srcset="images/desktop.jpg, images/desktop2.jpg 2x" media="(min-width: 992px)">
<source srcset="images/tablet.jpg 1x, images/tablet2.jpg 2x" media="(min-width: 600px)">
<source srcset="images/smartphone.jpg, images/smartphone2.jpg 2x" media="(min-width: 320px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="images/smartphone.jpg" alt="">
</picture>Simulando retina em pc ou notebook
Documentação
Documentação e download do picturefill.js você encontrar no site do projeto
Gostou desse artigo? Dá uma forcinha!
A única forma que consigo remunerar meu site é através de anúncios, não esqueça de conferir!