robsonmoulin@gmail.com
(11) 9.8655-2539

Imagens responsivas de alta performance com Picturefill.js


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 

 

publicidade
publicidade
publicidade

Agora que você terminou de ler esse artigo

Que tal visitar nosso portfólio ou conhecer todas as soluções que oferecemos para você.