</div>
<!-- Conteúdo para JavaScript desabilitado/não suportado -->
<noscript><img src="assets/img/small.jpg" alt="Descrição da imagem">
</noscript>
</div>
Apesar da marcação incomum (e do trabalho de manutenção que esta acarreta),
a proposta é bem interessante e, para mais detalhes a respeito, basta acessar o repositório do Picturefill (http://ow.ly/cO5En).
69
4.4. Técnicas para imagens flexíveis em web designs responsivos
Casa do Código
Adaptive Images
Adaptive Images, de Matt Wilcox (http://ow.ly/cNXkD), é uma das técnicas que, na opinião do criador (e de milhares de pessoas pelo mundo que a utilizam), mais
fazem mais sentido. Adaptive Images detecta o tamanho da tela do visitante e auto-
maticamente cria, faz cache e entrega versões redimensionadas de imagens referen-
ciadas em tags <img>, apropriadas ao dispositivo que está sendo usado.
A técnica envolve o uso de PHP, JavaScript e um pouco de conteúdo em seu
arquivo .htaccess. Além de ser bastante eficiente por servir diferentes tamanhos
da mesma imagem dependendo do dispositivo usado para a visualização do site, um
outro ponto forte é que nenhuma alteração na marcação HTML se faz necessária.
Para instruções mais detalhadas e como instalar e usar a técnica, visite o site
oficial da Adaptive Images (http://ow.ly/cNVks).
Qual técnica para imagens responsivas usar?
Estas foram somente algumas recomendações de técnicas para imagens respon-
sivas possíveis. Existem, literalmente dezenas delas e, a cada dia que passa, mais pessoas desenvolvem novas técnicas, fazem propostas de padrões de marcação e tentam
desenvolver soluções eficientes para a questão de imagens responsivas para web.
E, dentre tantas técnicas diferentes, fica a pergunta: qual dela usar? Como já
comentado, não existe uma resposta única para esta questão, e sim uma análise do
projeto em que se está envolvido para que a decisão seja tomada. Para ajudar nesta decisão, alguma considerações devem ser feitas:
É importante que funcione sem JavaScript?
Sendo JavaScript, pode ser um plugin ou deve ser uma solução nativa"?
Pode-se usar marcação especial?
Semântica é essencial?
As páginas precisam ser validadas no validador do W3C?
Tem-se acesso a arquivos server side e .htaccess?
Deve-se primar pela performance?
70
Casa do Código
Capítulo 4. Imagens e recursos flexíveis
Respondendo a essas perguntas e tendo em mente que as pessoas esperam que
o acesso a um site móvel seja tão rápido quanto no desktop (http://ow.ly/bg7Wp), é possível escolher uma solução que seja a melhor para o projeto, em específico, que se esteja trabalhando no momento. Existe uma planilha pública com uma compilação
de algumas soluções possíveis para a questão das imagens responsivas. É interessante que você dê uma olhada e, quem sabe, já encontre alguma solução que se adeque a
seu projeto atual: http://ow.ly/cO758.
Nas palavras de Ethan Marcotte...
Para fechar com chave de ouro esta questão importantíssima sobre imagens
responsivas, cabe lermos (e pesquisarmos e refletirmos) sobre as palavras do pró-
prio Ethan Marcotte quando participou de uma entrevista à .NET Magazine (http:
//ow.ly/cSCTR), quando o entrevistador, Oliver Lindberg, disse Eu quero saber qual a abordagem mais prática e robusta para exibição de imagens responsivas em vários
dispositivos. A resposta foi:
Bem, há muita atividade em toda a área de imagens responsivas agora. Detecção
de largura de banda é um ponto cego para todos nós se estamos trabalhando no fron-
tend ou backend. navigator.connection não está amplamente implementado ou (eu
diria) é específico o suficiente para ser útil e todos nós estamos assistindo a Device APIs Working Group (http://ow.ly/cSDta) com interesse.
Dito isto, eu estou realmente animado com a discussão [do elemento] picture,
que tem sido habilmente conduzida por Mat Marquis (http://ow.ly/cSEky) no W3C
community group for responsive images (http://ow.ly/cSEc0). E a solução Picturefill, de Scott Jehl, significa que podemos começar a experimentar isso hoje.
Claro que ainda não temos, sequer, uma especificação para um novo padrão de
marcação, muito menos uma solução nativa funcional. Então, talvez a curto prazo,
precisemos confiar em negociação de conteúdo server-side - embora, se esse for o caso, espero que haja uma mentalidade mais mobile first, à Brett Jankords Categorizr
(http://ow.ly/cSFcA).
Mas eu pergunto se há outra opção disponível para nós: por que não podemos
perguntar aos nossos usuários o que eles preferem? Eles estão acostumados a tomar
decisões cosméticas de UI sempre que visitam o Gmail ou a escolher a qualidade de vídeo no YouTube. Cada vez que clicam em um link móvel ou desktop em seus telefones, eles estão optando por experiências e conjuntos de recursos que são radicalmente diferentes um do outro. Então, eu estou querendo saber se há uma solução mais ma-tizada aqui: poderíamos pedir aos nossos usuários para, bem, dizer-nos que tipo de 71
4.5. Imagens em alta resolução