Logotipo Design Interativo
imagens-responsivas-de-alta-performance

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 

 

Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade