Tab Atkins Júnior é um desenvolvedor americano que trabalhou durante muitos anos em uma pequena companhia de software no Texas. Atualmente, trabalha no Google como integrante do time de desenvolvimento do Chrome e define sua atuação com sendo um “Web Standards Hacker”. Ele é membro do Grupo de Trabalho das CSS no W3C e participa como membro e/ou contribuinte de diversos outros Grupos de Trabalho, entre eles os da HTML e das fontes. Participa ativamente de várias listas de discussão, escreve para diversos sites de tecnologia web e também no seu Blog pessoal o Tab Completion.

O que ele tem a ver com imagens responsivas? No dia 18 de outubro deste ano, ele publicou um documento que chamou de “Proposal for RespImg Syntax”, que em tradução livre significa “Proposta de Sintaxe para Imagens Responsivas”. O documento segue o formato da documentação publicada pelo W3C e a uma primeira vista tem-se a impressão que realmente é um documento daquele Consórcio. Contudo, a impressão inicial é logo desfeita, pois o subtítulo do documento esclarece que se trata de um rascunho de proposta não oficial.

O que é o “Proposal for RespImg Syntax”

O documento define seu objetivo como sendo o de descrever uma proposta de sintaxe para imagens responsivas que permita ao agente de usuário escolher a versão mais apropriada de uma imagem entre várias candidatas. Soa bem familiar e aparentemente não há nada de novo em relação aos métodos atuais de definição de imagens responsivas, não é mesmo?

Então, qual é o diferencial? O primeiro diferencial é a própria sintaxe, que foi bastante simplificada em relação à sintaxe atual. Mas, somente a sintaxe não seria um argumento consistente para implementar um novo método apontando para um rumo bem diverso daquele que vem sendo desenvolvido na busca de uma solução para servir imagens responsivas e que hoje se encontra fundamentado no atributo srcset da HTML5.

O grande diferencial da sintaxe proposta é que ela se visa solucionar os problemas próprios das três escolhas para servir imagens responsivas. Problemas esses cujas soluções têm sido o alvo de toda a comunidade envolvida com as imagens responsivas e ainda não solucionado de modo completamente satisfatório.

As escolhas são ditadas pelas peculiaridades de cada projeto e cabe ao autor optar por uma delas.

Escolha baseada em quanto da imagem será apresentada:

O termo inglês para essa escolha é “Art-direction”. Se uma imagem grande for reduzida em tamanho, é certo que a partir de determinado tamanho, a informação central a ser passada pela imagem se reduza a um tamanho tal que a informação passada pela imagem se perca.

Nessa escolha, o autor opta por determinar o tema central da imagem e cortá-la em volta do tema, reduzindo-a em tamanho e mantendo o foco no tema. A medida que o dispositivo diminui em tamanho, o corte se faz de modo a captar menos área em torno do tema central.

Escolha baseada na resolução da imagem

Nessa hipótese, o autor serve a mesma imagem criada com resoluções diferentes, servindo a de alta definição para dispositivos de alta resolução e as de resolução menor para dispositivos com baixa resolução ou limitada largura de banda, evitando perda de tempo com arquivos maiores.

Escolha baseada na resolução e na apresentação da imagem

Essa escolha contempla os casos em que o autor precisa considerar o tamanho do dispositivo e os breakpoints projetados.

A necessidade de combinar diferentes resoluções das imagens com o “corte” das imagens acaba criando uma sintaxe verbosa que aliada a necessidade de estudo detalhado para determinar qual imagem servir a cada breakpoint, acaba fazendo com que essa escolha se transforme em uma verdadeira dor de cabeça.

Adicionalmente, há que se considerar o preloader nativo dos navegadores que baixam todas as imagens cuja URL eles conhecem, criando a impossibilidade de servir eficazmente uma só imagem para determinada situação.

Sintaxe proposta

A sintaxe consiste em usar-se o elemento img da linguagem HTML com uma série de atributos do tipo src-n (n = 1, 2, 3, etc.). Ao conjunto desses atributos em um elemento denominou-se src-N.

A gramática para a definição do atributo é conforme o formato mostrado a seguir.

<src-n-attribute> = <media-query>? [ <x-based-urls> | <viewport-urls> ]
  <x-based-urls> = [ <url> <resolution>? ]#

  <viewport-urls> = <size-viewport-list> ; <size-based-urls>
  <size-viewport-list> = <image-size> [ ( <viewport-size> ) <image-size> ]*
  <image-size> = <length> | <percentage>
  <viewport-size> = <length>
  <size-based-urls> = [ <url> <integer> ]#

Ops! Não se assuste. A coisa não é tão complicada quanto parece.

A proposta de sintaxe foi desenvolvida de modo a oferecer uma solução consistente para cada uma das três escolhas possíveis, conforme veremos a seguir.

Sintaxe para a escolha “Art-direction”

Nessa sintaxe o valor dos atributos src-N começa com a declaração de uma media-query seguida do URL de uma imagem, conforme mostrado a seguir.

<img src-1="(max-width: 400px) oxford-p.jpg"
src-2="(max-width: 1000px) oxford-m.jpg"
src-3="oxford-g.jpg"
src="oxford-falback.jpg"
alt="Maujor e esposa em Oxford.">

Nessa sintaxe os mecanismos internos do navegador percorrem os atributos em ordem numérica e ao encontrar o primeiro casamento com a media-query definida escolhe o URL correspondente e serve a imagem.

Sintaxe para a escolha resolução

Nessa sintaxe o valor do atributo src-n consiste de uma série de URLs, separadas por vírgula, cada uma delas seguida por um identificador de resolução, conforme mostrado a seguir.

<img src-1="oxford.jpg 1x, oxford-alta.jpg 2x, oxford-baixa.jpg .5x"
src="oxford-falback.jpg"
alt="Maujor e esposa em Oxford.">

Nessa sintaxe os mecanismos internos do navegador escolhem a imagem baseados nas informações que eles conseguem processar nativamente a respeito da densidade de pixels da tela, da largura de banda do dispositivo e de qualquer outro fator relevante para a escolha.

O identificador para a imagem com resolução 1x é facultativo (pode constar ou ser omitido da sintaxe).

Cada uma das duas dimensões intrínsecas da imagem escolhida é igual ao tamanho da imagem em pixels dividido pelo respectivo indicador de resolução. Por exemplo se a largura da imagem é de 100px e seu identificador de resolução é 2x sua largura intrínseca será 100/2 = 50px.

Sintaxe para a escolha baseada na resolução e na apresentação

Na escolha anterior as imagens criadas em diferentes resoluções têm as mesmas dimensões (CSS pixel), implicando em se servir uma imagem de dimensões fixas (redimensionadas pelo identificador de resolução) para diferentes tamanhos de tela.

Nem sempre isso é desejável. Principalmente em duas situações comuns de projeto.

1. A imagem deve reencher uma porcentagem do seu container;
2. O tamanho da imagem é variável de acordo com os breakpoints.

É certo que para esses casos existe uma solução com uso de media-query, mas ela se torna complicada quando a resolução da imagem está envolvida. Quando servimos a mesma imagem com diferentes dimensões para diferentes resoluções pode ocorrer que uma delas satisfaça a mais de um caso. Manipular tais particularidades pode resultar um um código extremamente longo com repetição exaustiva de URLs além de envolver cálculos matemáticos apurados. Acresce-se ainda o fato de que o código resultante não será apropriado para dispositivos futuros com suas telas de altíssima resolução.

Para cada uma das situações de projeto mencionadas anteriormente é prevista uma sintaxe como mostrado a seguir.

Imagem preenchendo uma porcentagem do seu container

Nesse caso, a sintaxe prevê o valor do atributo src-n começando com a porcentagem desejada seguida de ponto e vírgula, seguida por uma lista de URLs separadas por vírgula.

Usando as informações fornecidas pela sintaxe o navegador determina qual será a largura da imagem e converte suas dimensões apropriadamente de modo a otimizar a densidade.

Suponha que temos uma mesma imagem em duas versões: uma com largura de 400px e outra com largura de 800px.

<img src-1="100%; imagem400.jpg 400,  imagem800.jpg 800"
src="imagem.jpg"
alt="Descrição da imagem">

Se a largura da viewport for igual a 320px, a sintaxe mostrada é equivalente a seguinte sintaxe estudada no item anterior.

<img src-1="imagem400.jpg 1.25x,  imagem800.jpg 2.5x"
src="imagem-fallback.jpg"
alt="Descrição da imagem">

Se a largura da viewport for igual a 800px, a sintaxe mostrada é equivalente a seguinte sintaxe estudada no item anterior.

<img src-1="imagem400.jpg .5x,  imagem800.jpg 1x"
src="imagem-fallback.jpg"
alt="Descrição da imagem">

Indepenente da largura da viewport, o navegador saberá qual URL carregar para servir a imagem mais apropriada sem necessidade de que o autor faça qualquer cálculo matemático.

O exemplo a seguir mostra uma situação onde a quantidade de opções de imagem para cobrir uma faixa mais compreensiva de tamanhos de telas e dispositivos foi aumentada.

<img src-1="100%; img1.jpg 160, img2.jpg 320, img3.jpg 640,
img4.jpg 1280, img5.jpg 2560"
src="imagem-fallback.jpg"
alt="Descrição da imagem">

Tamanho da imagem varia de acordo com breakpoints

A sintaxe para esse caso é um pouco mais complicada contudo sua estrutura continue a mesma ou seja, a primeira parte do valor do atributo src-n é separada da segunda por ponto e vírgula e a segunda parte é uma lista de URLs e tamanhos de imagem tendo como separador dos itens uma vírgula.

A primeira parte do valor do atributo é uma lista alternada de tamanhos de imagem com valores de breakpoint.

Os valores de breakpoints são colocados entre parênteses para distingui-los visualmente do tamanho da imagem. Os breakpoints são listados em ordem ascendente e os tamanhos de imagens serão servidos entre os dois breakpoints entre os quais foram inseridos na sintaxe.

Para exemplificar a sintaxe, considere um layout com três breakpoints (uma coluna – 100%, duas colunas – 50%, três colunas – 33%) como mostrado na figura a seguir.

Supondo que uma imagem será usada para os três layouts (não haverá art-direction), a sintaxe para esse caso é mostrada a seguir.

<img src-1="100% (30em) 50% (50em) calc(33% - 100px);
img100.jpg 100, img200.jpg 200, img400.jpg 400,
img800.jpg 800, img1600.jpg 1600, img3200.jpg 3200"
src="imagem-fallback.jpg"
alt="Descrição da imagem">

A primeira parte do atributo define dois breakpoints (30em e 50em) e declara que até 30em a imagem terá dimensões de 100%, de 30em a 50em as dimensões serão de 50% e acima de 50em as dimensões serão de 33% – 100px.

As seis imagens declaradas cobrem todas as possibilidades. Para telas pequenas, uma das imagens entre 100px e 800px será baixada e servida, de acordo com o tamanho e a densidade da tela. Para telas de tamanhos médio e grande uma das as imagens entre 400px e maiores será escolhida.

O autor não precisa realizar nenhum cálculo matemático complexo para escolher qual imagem servirá para o que. Basta que ele forneça uma quantidade de imagens que considere razoável para cobrir os casos possíveis e os mecanismos nativos do navegador se encarregarão de fazer a escolha mais adequada. A largura intrínseca da imagem será igual á largura da imagem escolhida.

Convém esclarecer que apesar do exemplo mostrar imagens com o dobro do tamanho da anterior (100px, 200px, 400px, etc), isso não é uma condição mandatória. O autor pode criar imagens do tamanho que achar mais conveniente.

Modelo de processamento

No último item da proposta, Tab Atkins descreve o algorítimo a ser implementado no agente de usuário para identificação, seleção e escolha da imagem a ser servida. Não iremos descrever e comentar o algorítimo nesse artigo, mas se você estiver interessado consulte o item 4 – Processing Model da proposta.

Conclusão

Com o aparecimento do design responsivo a busca de uma solução para imagens responsivas, vem sendo perseguida pela comunidade envolvida. Existem vários scripts que se propõem a resolver a questão, contudo nenhum deles oferece uma solução definitiva. Cada um deles tem seus pontos positivos e negativos. Uns se prestam mais para uma determinada situação, e outros para outras.

Tab Atkins criou uma solução diferente e em lugar de apresentar mais um script está propondo uma sintaxe para ser interpretada pelo agente de usuário, que em última análise será o responsável pela escolha da imagem adequada.

Sem dúvida é uma proposta interessante, que graças ao currículo e ao papel que o autor desempenha na comunidade certamente será considerada e analisada. Pelo menos é essa a minha expectativa.

E você? Gostaria de opinar ou trocar ideias com os demais leitores deste Blog sobre a proposta do Tab Atkins? Você considera que esse poderá ser o futuro das imagens responsivas?

Fique à vontade. A área de comentários é logo aí embaixo.