Existem grandes chances de que qualquer web designer usando nosso aplicativo de teste de navegador Ghostlab, que permite testes perfeitos em todos os dispositivos simultaneamente, terá trabalhado com design responsivo de alguma forma. E, como os sites e os dispositivos de hoje se tornam cada vez mais variados, uma infinidade de técnicas de imagens responsivas estão aparecendo para atender às necessidades dos desenvolvedores.

No entanto, o design responsivo pode parecer um campo minado. A enorme gama de opções de imagens responsivas na Web é assustadora – e isso antes de você chegar a enfrentar os obstáculos específicos para o site em que está trabalhando. Mas não tema! Você pode encontrar logo abaixo um resumo básico do que são as imagens responsivas, como elas podem afetar seu processo de trabalho e alguns dos principais fatores definidores que pensamos que devem ser aplicados ao pensamento de qualquer designer, qualquer que seja a sua escolha…

O que são imagens responsivas?

Para simplificar: o design responsivo é uma abordagem que permite que o seu site se ajuste com fluidez aos parâmetros de qualquer dispositivo – o que envolve um mínimo de scrolling ou zoom. Em outras palavras, criar sites bonitos que sejam dinâmicos e flexíveis o suficiente para serem visualmente sensíveis a qualquer tela, das larguras de celulares até o formato desktop. E para tornar isso possível, é claro que você precisa de uma abordagem flexível para imagens. Simples, não?

Bem… sim e não. Apesar de as imagens responsivas serem agora amplamente utilizadas e bem fáceis de usar em layouts básicos, qualquer um que esteja criando sites mais complicados saberá que os problemas podem aparecer rapidamente. Não é preciso dizer que não existe uma chave que sirva para todos os cadeados – assim, nós listamos sete dos problemas mais comuns abaixo, juntamente com uma recapitulação básica de técnicas eficazes relacionadas a cada problema, para ajudá-lo a ter seu site funcionando sem problemas.

Quais são os problemas?

Um fator importante na necessidade de imagens responsivas é o tamanho do site em geral – ainda hoje, uma porcentagem muito grande de versões móveis de sites é tão grande (ou até maior) do que suas versões desktop, afetando negativamente o desempenho. As imagens desempenham um papel importante nesse processo, já que a qualidade de imagem e o tamanho, em geral, continuam a aumentar, mas isso faz pouco sentido se os dados são desperdiçados pelos dispositivos móveis ou desktops com baixa largura de banda. Então, para melhorar a eficiência, mais designers agora estão usando as imagens responsivas – no entanto, eles muitas vezes acabam se complicando.

Redimensionar para baixo as imagens para funcionar melhor nos dispositivos é a abordagem mais comum para tornar o conteúdo responsivo, mas em muitos casos isso pode tornar a imagem menos poderosa – o “problema da Direção de Arte”. Outras questões menos estéticas, tais como processos que não querem ‘validar’ ou não são considerados estritamente semânticos podem, para alguns designers (ou clientes), ser um obstáculo. Também existem os aspectos técnicos a serem considerados – componentes do lado do servidor, o uso de JavaScript, testes de largura de banda e opções de terceiros. Todas essas questões têm (mais ou menos) boas soluções, então leia para descobrir a que é melhor para você.

Problema 1 – Semântica

Fazer com que as imagens responsivas trabalhem de forma limpa e confiável através de múltiplas plataformas, por vezes, envolve o uso de técnicas que não são “semânticas”. Por quê? Porque quando o src de uma imagem aponta para uma imagem real, com um texto alternativo para descrevê-lo, mesmo que o src seja a menor imagem possível, isso significa que você está baixando dados desnecessários.

Para contornar essa situação, algumas das técnicas descritas a seguir exigem que o src da imagem seja removido ou linkado a um GIF transparente, por exemplo. Se isso não funcionar e você estiver procurando uma abordagem semântica, então Imagens Adaptativas de Matt Wilcox, ou o plugin jQuery HiSRC de Marc Grabanski e Christopher Schmitt, são duas opções excelentes para dar uma conferida.

Imagens Adaptativas

Se o site em que você estiver trabalhando tiver uma grande quantidade de imagens herdadas, ode não ser viável ajustar cada imagem com uma marcação especial ou um CSS especializada. Nesse caso, Imagens Adaptativas são indiscutivelmente a melhor solução disponível. Não requer nenhuma marcação personalizada para as imagens e, portanto, permite compatibilidade com versões anteriores redimensionando as imagens automaticamente. No entanto, elas exigem Web Server Apache 2 e PHP 5.x, que podem não ser compatíveis com a plataforma do seu site (falaremos mais sobre isso depois). Também requerem que suas imagens estejam hospedadas com o seu servidor Web, ao contrário de outros lugares através de uma rede de distribuição.

HiSRC

Diferentemente das Imagens Adaptativas, o HiSRC exige marcação personalizada no HTML, e por isso pode não ser apropriado no caso de sites com muito conteúdo legado. Por outro lado, ele dá liberdade para especificar um corte personalizado ou zoom de imagens para plataformas menores (o “problema da Direção de Arte” discutido abaixo), bem como permite que o script escolha resoluções de imagens diferentes de acordo com a velocidade da rede (“o problema da largura de banda”) – nenhum deles Imagens Adaptativas fazem. No lado negativo, o HiSRC só vai funcionar se você estiver usando a biblioteca jQuery, por isso, se isso não for uma opção, tente uma dessas outras soluções.

Problema 2 – Direção de arte

Uma imagem vale por mil palavras… na maioria das vezes. Muitas técnicas de imagem responsivas permitem que você forneça várias versões de resolução de uma imagem, que podem então ser utilizadas em conformidade para caber em uma determinada plataforma. No entanto, isso pode, às vezes, ter um efeito negativo, e a mensagem da imagem é diluída ou perdida por completo. Qual é o tamanho mínimo para uma imagem? A resposta, é claro, depende do contexto.

Até mesmo as imagens mais impressionantes podem perder seu poder quando reduzidas para caber nos limites de dispositivos menores, como celulares. Se essa situação se aplica ao seu site, você precisa de uma solução que resolva o “problema de Direção de Arte”, permitindo o corte personalizado e as especificações de zoom. Ambas as técnicas HiSRC e Picturefill (descritas abaixo) oferecem muita flexibilidade aqui, mas lembre-se de que o seu site tem um número elevado de imagens legadas, e você vai fazer um monte de marcação personalizada, o que talvez não seja desejável.

Problema 3 – Validez

Se você estiver personalizando a marcação, verificar a validez de marcação usando um serviço de validação como W3C garante que uma construção siga a sintaxe correta de qualquer linguagem com a qual ela funciona (por exemplo, HTML). Enquanto a maioria dos browsers são capazes de pensar com antecedência para apresentar páginas Web que não são estritamente “válidas” sem quaisquer problemas, esses resultados às vezes podem variar entre um navegador e um outro. Em casos raros, pode causar layouts confusos ou até mesmo falhas. “Validar” cada página é uma maneira à prova de balas de identificar esses problemas antes que eles ocorram.

Mas isso não quer dizer que o código inválido não pode funcionar perfeitamente em todos os navegadores! Na verdade, muitas vezes ele o faz. Picturefill de Scott Jehl é amado por muitos e usa JavaScript para o elemento <picture> exibir imagens responsivas e funciona perfeitamente, apesar de ser tecnicamente uma sintaxe inválida. Prossiga com o que funcionar melhor para você: se a validade for uma obrigação, então as Imagens adaptáveis (?)ou o HiSRC poderão ser um melhor ajuste.

Problema 4 – Capacidades de largura de banda

Por mais que todos nós gostaríamos de falar outra coisa, um mundo de conexões de super-velocidade e tempos de carga na velocidade da luz para todos ainda estão um pouco distantes. É por isso que, na opinião de muitos desenvolvedores, as imagens responsivas devem considerar a largura de banda disponível em qualquer dispositivo dado, e ajustar o tamanho da imagem de acordo para cortar o excesso de downloads.

Foresight.js de Adam Bradley é uma solução que funciona como uma espécie de conexão verificadora de velocidade, fazendo primeiro o download de um arquivo de teste de 50K e, em seguida, determinando qual o tamanho da imagem se adapta melhor: uma técnica que também está disponível com HiSRC. A desvantagem disso? A imagem de teste significa um download adicional de 50K, e um tempo de carregamento da página potencialmente atrasado. No entanto, muitos consideram isso preferível do que servir grandes imagens que ficam inutilizadas.

Problema 5 – componentes do lado do servidor

A maior parte do trabalho das Imagens Adaptativas é feita através de .htaccess e PHP 5.x, que oferecem uma ótima solução sem dependência completa em JavaScript. O problema com o .htaccess é que ele assume que o seu site está sendo executado em um servidor Apache. Se estiver usando outra coisa, como Nginx, você pode transferir o .htaccess para a sintaxe Nginx – que é semelhante ao Apache, mas isso envolve algum trabalho. Além disso, a adição de arquivos PHP para o diretório raiz do seu site pode não ser possível se você estiver executando em outras tecnologias, tais como Ruby ou Python. Claramente, isso não é ideal para todos, por isso certifique-se de verificar primeiro antes de cair de cabeça.

Problema 6 – JavaScript

Como você já deve ter percebido, muitas das técnicas de imagem responsivas acima requerem algum JavaScript. Se você preferir manter as coisas o mais simples possível e deseja evitar completamente o uso de JavaScript, então dê uma olhada na solução Sencha.io Src de terceiros discutida um pouco mais abaixo.

O JavaScript é aplicável à maioria das opções listadas aqui. Algumas usam apenas uma pequena quantidade, enquanto outras envolvem uma porção de configuração dependendo da escala do projeto. Mesmo a técnica de Imagens Adaptativas requer JavaScript, embora apenas uma quantidade mínima, fazendo a maior parte da sua magia através de Apache e PHP. O que nos leva a…

Problema 7 – Terceiros

Se você prefere terceirizar, o Sencha.io Src é uma técnica de terceiros para redimensionar imagens para caber em qualquer usuário fornecido. Ao agir como um proxy para imagens, que garante que você nunca precise aprofundar as configurações personalizadas no seu servidor, basta apontar a imagem para Sencha.io que, em seguida, ele usa sua string user-agent para detectar os parâmetros do dispositivo e sua imagem é redimensionada!

Existem várias outras opções, caso você queira utilizar soluções de terceiros. Uma alternativa para Sencha.io é ReSRT.it, que oferece um serviço muito semelhante, mas sem detecção de user-agent ou cookies. Ele também permite a detecção de largura de banda e q flexibilidade para resolver o problema ade Direção de Arte, se isso se aplica ao seu site. Device Atlas Cloud, Responsive.io e Thumber.io são outras opções. Isso só para citar algumas.

Não é preciso dizer que a dependência de terceiros deve ser tratada com cautela. Embora essas soluções muitas vezes funcionem perfeitamente e sejam convenientes (e gratuitas para usuários individuais, no caso de Sencha.io), você sempre corre o risco de tempos de inatividade inesperados. Portanto, é melhor ponderar as potenciais consequências antes de saltar de cabeça!

Melhor prática hoje

Picturefill 2.0 nos permite usar imagens responsivas de uma forma que comecemos a cuidar de algumas das questões discutidas acima.

Instalando e usando um polyfill

Polyfills são feitos para serem usados assim: configure-os e esqueça-os, mas por este ser um polyfill HTML, você precisa fazer o elemento picture manualmente ou usar algum tipo de ferramenta HTML para fazer isso por você.

Ferramentas HTML (canivete suíço) são bastante onipresentes e vêm com kits de ferramentas tal como Modernizr. Só verifique se a imagem é suportada em qualquer shiv que você escolher.

<!-- Create the actual picture element if you haven’t already. -->
<script>
document.createElement( "picture" );
</script>

<!-- Asynchronously load the polyfill. -->
<script src="picturefill.js" async></script>

Além de criar o elemento picture, você tem que linká-lo ao script. Também é recomendado utilizar o atributo async, para que Picturefill não pare o carregamento da sua página.

Usando PictureFill 2 com srcset

Ok, então agora vamos ver a sintaxe que fornece o melhor suporte e que utiliza o srcset.

Ele deve parecer familiar porque tem os mesmos atributos que vimos quando discutimos a especificação.

<img sizes="(min-width: 40em) 80vw, 100vw” 
srcset="pic-small.png 400w, pic-medium.png 800w, pic-large.png 1200w" alt="Obama”>

A principal diferença entre esse trecho e a especificação é a remoção de um atributo fallback src, que foi eliminado intencionalmente para evitar que as imagens sejam baixadas duas vezes em navegadores não suportados.

Os tamanhos do atributo informam ao navegador o tamanho da imagem relativo na viewport. Isso muitas vezes fica esquecido porque srcset é a escolha descolada agora, mas esse atributo é igualmente importante.

Utilizando PictureFill 2 com o elemento picture

O RICG fez um trabalho tão bom com a segunda versão do Picturefill que a sintaxe do elemento thepicture deve vir sem nenhuma surpresa. Ele corresponde bastante à especificação:

<picture>
<source srcset="extralarge.jpg, extralarge.jpg 2x" media="(min-width: 1000px)">
<source srcset="large.jpg, large.jpg 2x" media="(min-width: 800px)">
<source srcset="medium.jpg">
<img srcset="medium.jpg" alt="Cambodia Map">
</picture>

A maior mudança entre as versões 1.0 e 2.0 é a remoção de alguns HTML tradicionais (divs e spans) e a adição de elementos mais novos (imagem e fonte). Além disso, o suporte para srcset é built-in.

A diferença entre isso e o elemento picture oficial é o fallback img. Você vai notar aqui que o fallback img também tem o atributo asrcset, em vez de um src normal (que é amplamente suportado).

Novamente, isso é para evitar o download duplo. O srcset na tag img também causaria download duplo se o browser suportasse srcset, mas não a tag picture.

Conclusão

Não é preciso dizer que até que uma fórmula mágica apareça, nenhuma das soluções acima irá abordar todas as eventualidades possíveis de design. Mas isso não significa que você não pode criar um conteúdo responsivo bonito, que funciona como um sonho no desktop e no celular. Assim como acontece com a maioria das coisas, a chave é pesar quais os problemas que você mais quer resolver – sejam eles de conteúdo legado, largura de banda, Direção de Arte ou outros – e começar a partir daí. Boa sorte!

***

Andi Dysart faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://davidwalsh.name/responsive-images