Imagens em web design responsivo: atributo srcset e elemento picture

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:

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:

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:

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, ou os dois?

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.