e problemas seríssimos. Esses aparelhos costumam ter uma tela menor e, muitas ve-
zes, resoluções não muito boas. Além disso, a velocidade da conexão móvel é inferior a de outros meios de acesso à Internet. Com tudo isso, temos que pensar a respeito 66
Casa do Código
Capítulo 4. Imagens e recursos flexíveis
de como servir imagens adequadamente aos visitantes, levando em conta seu peso
(tamanho, em KB, das imagens) e seu tamanho (número de pixels que formam a
imagem).
Segundo as técnicas mostradas até então, uma mesma imagem é apresentada seja
pra qual resolução for e, conforme o caso, esta é redimensionada para se adaptar à realidade da resolução do device que está sendo usado. Isso que revela um ponto
crítico: o mesmo arquivo de imagem que é apresentado numa boa velocidade de conexão, vista em uma tela de tamanho considerável, também é o servido e renderizado em dispositivos móveis!
Mesmo que sem querer, pessoas utilizando dispositivos mobile que acessam o
site serão penalizadas por não disporem de um display maior e/ou uma conexão
mais veloz no momento do acesso. O cidadão acessando seu site pseudo-otimizado
para dispositivos móveis será obrigado a esperar carregar aquela imagem de 1500px, pesando 80Kb, só para vê-la sendo lentamente renderizada, já redimensionada (e
distorcida), demorando muito mais tempo para terminar de ser baixada e exibida
em sua conexão 3G do que ele para decidir procurar o que precisa no site da concor-rente...
Se o acesso é feito via mobile, é mais lógico (e melhor para quem acessa) que
uma versão reduzida da imagem, de menor peso e tamanho, seja enviada a fim de
aprimorar a experiência da visita. Afinal, 71% das pessoas esperam que o acesso a um site móvel seja tão rápido quanto no desktop (http://ow.ly/bg7Wp)!
4.4
Técnicas para imagens flexíveis em web designs
responsivos
Tendo visto o básico necessário para apresentar imagens flexíveis em designs responsivos para a web, cabe ressaltar que existem diversas técnicas para que essa entrega de imagens seja a mais adequada possível (dentro da perspectiva de quem desenvolveu
a respectiva técnica, evidentemente). A seguir, é possível conhecer uma série de técnicas para imagens flexíveis; como sempre, não existe a melhor técnica, e sim a que mais se enquadra ao seu estilo de desenvolvimento, dentro de um projeto específico.
Riloadr
Riloadr se auto-intitula um framework independente carregador de imagens res-
ponsivas. Ele realmente possui muitas boas características. Só para citar algumas: 67
4.4. Técnicas para imagens flexíveis em web designs responsivos
Casa do Código
Relativamente fácil de aprender e usar;
Oferece bastante controle sobre como as imagens responsivas irão se compor-
tar;
Opção de carregamento sob demanda (lazy load) das imagens;
Suporta browsers com JavaScript desabilitado (ou sem JavaScript);
Não faz múltiplas requisições para a mesma imagem.
A ideia principal do Riloadr é deixar o atributo src completamente fora das tags
de imagem, substituindo-o pelo atributo data-src. Através da mágica do JavaScript, é possível obter resultados satisfatórios com marcação do tipo:
<img data-src="pessoa.jpg">
<noscript>
<img src="img/small/pessoa.jpg">
</noscript>
Realmente, o Riloadr apresenta uma das técnicas mais eficientes para imagens
responsivas ou, pelo menos, é uma das que mais oferecem opções de personalização
e customizações para este objetivo. Para ver a documentação completa e exemplos
de uso, visite o repositório oficial do Riloadr (http://ow.ly/cO3HZ).
jQuery Picture
jQuery Picture é um plugin para jQuery (de somente 2KB) para adicionar su-
porte a imagens responsivas nos layouts. Ele suporta o elemento <figure> (usando alguns data-*) e, até, no elemento proposto <picture> (http://ow.ly/cO5lY). Um exemplo de uso seria:
<figure class="responsive" data-media="assets/img/small.png"
data-media440="assets/img/medium.png"
data-media600="assets/img/large.png">
<noscript>
<img src="assets/img/large.png" alt="">
</noscript>
</figure>
E, seguindo a melhor forma enxuta de iniciar plugins com jQuery:
68
Casa do Código
Capítulo 4. Imagens e recursos flexíveis
$(function(){
$('figure.responsive').picture();
})
A boa notícia é que, além de ser bastante simples e fácil de se usar, ele tem suporte pelos melhores navegadores e pelo Internet Explorer a partir de sua versão 9. Para maiores informações, dê uma olhada no respositório oficial do jQuery Picture (http:
//ow.ly/cO4OW).
Picturefill
Picturefill é uma abordagem de imagens responsivas que é possível utilizar atu-
almente sem maiores complicações (em browsers com suporte a Media Queries, que
será abordado futuramente). Para tanto, ele exige uma marcação diferente da usual
para imagens:
]
<div data-picture data-alt="Descrição da imagem">
<div data-src="small.jpg"></div>
<div data-src="medium.jpg" data-media="(min-width: 400px)">
</div>
<div data-src="large.jpg" data-media="(min-width: 800px)">
</div>
<div data-src="extralarge.jpg" data-media="(min-width: 1000px)">