O web design responsivo, presente somente há alguns anos na vida dos desenvolvedores (e das “pessoas comuns”), assim como toda nova tecnologia relacionada à web, não está totalmente consolidada e/ou apresenta maneira e técnicas uniformes para se conseguir a consecução dos objetivos e resolução das questões que aparecem no dia-a-dia do desenvolvimento web.
Uma das grandes questões “em aberto” atualmente é a questão de imagens responsivas, quer dizer, servir apropriadamente versões de uma mesma imagem conforme as condições de acesso da pessoa que está entrando num site, provendo uma imagem de tamanho e qualidade condizente tanto a quem está usando, por exemplo, um smartphone de resolução 480×800, quanto quem está com um tablet ou desktop em 2048×1536.
Como mostro no livro “Web Design Responsivo: Páginas adaptáveis para todos os dispositivos“, existem diversas técnicas que podem ser usadas hoje para se conseguir imagens responsivas, a maioria envolvendo JavaScript e/ou uma junção de técnicas e procedimentos no front-end e back-end, o que é conhecido como RESS (Responsive Design + Server Side Components). São soluções da comunidade que, felizmente, é bastante ativa e criativa e sempre provê alternativas para o que ainda não é oficial – em alguns casos, até alternativas melhores daquilo que é “oficial”.
Concomitantemente, existe um grupo no W3C – Responsive Images Community Group ou Grupo da Comunidade de Imagens Responsivas – que, como eles próprios divulgam, tem por objetivo entregar fontes de imagem alternativas com base em capacidades de dispositivosa fim de evitar desperdício de largura de banda e otimizar a exibição tanto para tela, quanto para impressão
. Quer dizer, algumas pessoas do W3C que ficam pensando na melhor maneira de resolver essa questão de imagens responsivas para propor soluções condizentes às necessidades dos desenvolvedores – que, obviamente, impactam e se destinar a oferecer soluções melhores de desenvolvimento para as pessoas não-desenvolvedores que acessam sites terem melhores experiências.
Atributo “srcset” e elemento picture
Duas das então mais aceitas e comentadas propostas – já “abraçadas” pela comunidade de desenvolvedores e, inclusive, já gerando alguns debates mais acalorados – são o atributo srcset
para o elemento de imagem e o novo elemento picture.
Atributo “srcset”
Como é possível ver no Editor’s Draft da proposta do atributo srcset
(status no momento da publicação deste artigo), ele seria usado juntamente com o src
e proveria, de uma maneira simples e compacta, múltiplas variantes de uma mesma imagem em diferentes resoluções ou diferentes dimensões de viewport. Quer dizer, ele seria um complemento, não uma substituição ao já usado e consagrado atributo src
em uso. Em sua maneira mais simples, seria algo como:
1 2 3 |
<img src="pera-mobile.jpeg" srcset="pera-tablet.jpg 720w, pera-desktop.jpg 1280w" alt="A pêra é suculenta."> |
Existem mais peculiaridades e variantes possíveis (veja na documentação), mas, basicamente, é a especificação de uma imagem diferente para diferentes resoluções ou diferentes tamanhos de viewport.
Elemento picture
Esta proposta já é diferente e, ao invés da criação de um novo atributo, é referente à criação de um novo elemento, picture, que seria representado na camada de conteúdo pela tag <picture>
. Conforme pode ser visto no Unofficial Draft sobre o elemento picture (status no momento da publicação deste artigo), o elemento picture forneceria uma maneira de agrupar várias versões de uma imagem com base em características diferentes (formato, resolução, recorte, etc), e isso permitiria que o agente de usuário selecionasse a imagem ideal com base nas condições e limitações de seu ambiente.
Seu uso se daria da seguinte maneira:
1 2 3 4 5 6 7 |
<picture width="500" height="500"> <source media="(min-width: 45em)" src="grande.jpg"> <source media="(min-width: 18em)" src="medio.jpg"> <source src="pequeno.jpg"> <img src="pequeno.jpg" alt=""> <p>Texto acessível</p> </picture> |
Como pode ser visto, seria uma tag <picture>
com a especificação de largura e altura e, dentro, tags <source>
(tal como em <audio>
e <video>
) que indicariam breakpoints específicos para o uso de “tal” ou “qual” imagem seguidos pela imagem padrão (<img>
) e um texto acessível.
Também, poderia ser usado juntamente com o atributo srcset
:
1 2 3 4 5 6 7 |
<picture width="500" height="500"> <source media="(min-width: 45em)" srcset="grande-1.jpg 1x, grande-2.jpg 2x"> <source media="(min-width: 18em)" srcset="medio-1.jpg 1x, medio-2.jpg 2x"> <source srcset="pequeno-1.jpg 1x, pequeno-2.jpg 2x"> <img src="pequeno-1.jpg" alt=""> <p>Texto acessível</p> </picture> |
Nesta variante, o atributo srcset
também é colocado na “mistura” e o agente de usuário selecionaria qual a imagem mais apropriada para cada breakpoint.
Imagens responsivas: a discussão continua
Em um artigo que também fala a respeito da questão de imagens responsivas, o Almir Filho fez a seguinte pergunta:
Qual é a solução mais correta a ser incluída nos padrões futuramente: srcset,
Pessoalmente, acredito que seria incluir os dois. A proposta do atributo srcset
é bem mais simples, enxuta e simples de ser implementada pelos desenvolvedores (inclusive para atualização de códigos existentes); em contrapartida, <picture>
, apesar de seu código extremamente oneroso, permite ao desenvolvedor maior controle sobre o que servir para os visitantes em diferentes contextos.
Como as necessidades de cada projeto variam (e variam os estilos e gostos dos desenvolvedores, também), limitar a somente uma ou outra não parece ser o conceitual e tecnicamente adequado. Para os casos em que não é preciso tanto controle ao prover as imagens, usaria-se o atributo srcset
; se um maior controle e “ajuste fino” for requerido, o elemento picture.
Aliás, como você deve ter visto na página do rascunho do elemento picture, eles próprios já estão considerando a aplicação juntamente com o atributo srcset
, o que, de certa maneira, é uma resposta do próprio W3C à pergunta do Almir.
Como <picture>
está numa fase de normatização mais avançado, juntando-se o fato de que ele, muito provavelmente, irá se valer do atributo srcset
, podemos esperar para breve uma solução oficial W3C em relação a imagens responsivas. Se, mesmo assim, algumas das propostas “paralelas” se mostrarem mais eficientes e/ou interessantes do que a recomendação oficial, aí já fica a critério de cada desenvolvedor (ou cada projeto) usar uma ou outras solução.