Resumo

  • Em fevereiro de 2013, o W3C publicou um primeiro rascunho do elemento picture e outro sobre os usos de imagens responsivas, em colaboração com o Responsive Images Community Group.
  • No HTML atual, srcset e sizes ajudam a escolher arquivos de uma composição; picture, source e media permitem oferecer outra composição para outro formato de tela.

A editora abre a foto da praia. O céu pesado ocupa a metade superior, ondas cortam as pedras e um farol vermelho segura o horizonte. Na página larga, a distância faz parte da graça. No celular, a mesma distância transforma o farol em pontuação. O navegador não errou a conta: reduziu a fotografia inteira. Quem precisava mudar era o enquadramento.

Páginas já conseguiam reorganizar colunas para larguras diferentes. A foto apontada por um único img src continuava fixa, mesmo quando o desenho ao redor se transformava. Um programa poderia trocar a URL mais tarde, só que o navegador tem pressa de buscar imagens enquanto lê o HTML. Para oferecer a foto certa no tempo certo, era preciso escrever as opções no próprio documento, antes que a primeira requisição saísse.

Em 26 de fevereiro de 2013, o W3C anunciou dois primeiros rascunhos públicos. Um tratava do elemento picture; o outro recolhia casos de uso e requisitos. Os textos foram desenvolvidos com o Responsive Images Community Group. A dupla tinha uma virtude de redação: descrever o problema da imagem antes de brigar pelas letras da etiqueta.

O primeiro rascunho de picture apresentou um contêiner cuja origem da imagem dependeria de consultas de mídia CSS. Opções e condições apareciam no HTML, à vista do navegador quando ele processasse a página. Era um projeto inicial, com detalhes ainda abertos. Seu gesto fundamental foi permitir que a publicação declarasse alternativas e que o navegador as escolhesse de acordo com a situação real.

A nota de casos de uso do W3C, de novembro daquele ano, separou dois problemas. O primeiro: entregar uma composição idêntica em resoluções diferentes, conforme a densidade da tela e o espaço ocupado na página. O segundo: trocar a própria composição. Em um retrato coletivo, uma tela estreita pode precisar de um corte que aproxime a pessoa principal. Na costa, o farol precisa de uma fotografia mais fechada. Um arquivo de alta resolução da vista distante oferece apenas um farol minúsculo com excelentes detalhes.

O capítulo de imagens do HTML mantido pela WHATWG guarda ferramentas diferentes para as duas tarefas. srcset pode listar candidatos com descritores de densidade. Quando a largura desenhada depende da janela, descritores de largura e sizes informam o espaço previsto para a imagem. O navegador considera a densidade do visor, o zoom e outras condições ao escolher entre os arquivos oferecidos. A editora monta o cardápio; o navegador sabe o tamanho da mesa.

Para direção de arte, picture contém elementos source. Um source pode trazer uma condição media e seus candidatos. O navegador procura a primeira fonte cuja condição se aplica e então escolhe um arquivo daquele conjunto. O img interno continua sendo o elemento de imagem e oferece a alternativa de exibição. A publicação pode entregar a paisagem inteira para a tela larga e um corte do farol para a estreita. Os dois arquivos foram criados por alguém que olhou a fotografia e decidiu onde a história estava.

As camadas trabalham juntas. O corte do celular também pode ter várias resoluções, assim como a paisagem do computador. Primeiro vem a pergunta sobre a composição; depois, a pergunta sobre o arquivo daquela composição. Essa ordem evita uma cena comum: quatro tamanhos da mesma foto em que o protagonista se esconde, todos muito eficientes em esconder o protagonista.

Há ainda a descrição alternativa de img. Uma pessoa que recebe o texto em vez dos pixels precisa entender o papel da imagem no artigo. Os cortes visuais mudam, mas o assunto editorial deve continuar legível. A tecnologia criou mais opções de apresentação; a responsabilidade de explicar a imagem ficou mais visível.

A história de 2013, portanto, não é apenas a invenção de uma etiqueta. O Web tinha páginas que dobravam de tamanho sem saber preservar o assunto de suas fotografias. O padrão abriu espaço para que o julgamento da editora entrasse no documento e a escolha rotineira ficasse com o navegador. O farol voltou a ocupar o lugar de farol.