O que são imagens adaptativas?

Imagens adaptativas são variantes de um recurso selecionadas ou geradas de acordo com o tamanho da tela, a densidade de pixels, o suporte a formatos ou as condições de rede de quem as visualiza. Cada variante representa a mesma imagem de origem com um perfil de entrega adequado.

A entrega de imagens adaptativas mantém uma imagem de origem e oferece várias variantes que diferem em largura em pixels, densidade de pixels, recorte ou formato de codificação. O Padrão HTML aborda a técnica sob o título “Imagens adaptativas”; a MDN a chama de imagens responsivas. A variante pode ser escolhida em dois lugares. Na marcação, srcset e sizes listam as opções e o navegador escolhe uma, enquanto picture com elementos source adiciona regras de direção de arte (media) e de formato (type). No servidor, uma única URL retorna bytes diferentes dependendo de cabeçalhos de requisição como Accept ou de dicas do cliente. A seleção baseada em marcação precisa apenas de uma URL distinta por variante. A seleção no servidor mantém o HTML curto, mas a correção dos resultados passa a depender de como os caches são informados sobre os cabeçalhos que variam.

Por que uma imagem pequena na página ainda faz o download do maior arquivo? O navegador começa a buscar as imagens antes de aplicar o CSS da página, portanto a largura no layout precisa ser declarada no HTML. Com descritores w, o Padrão HTML exige um atributo sizes; se ele estiver ausente ou não puder ser interpretado, a largura será considerada 100vw, como se a imagem ocupasse toda a área de visualização. Cada valor w também precisa corresponder à largura real do arquivo em pixels. Em imagens com loading="lazy", sizes="auto" permite que o navegador use a largura renderizada, com uma lista de alternativas em seguida para navegadores que não suportam a palavra-chave. Somente antes de um img assim os elementos source podem omitir sizes, o que o padrão trata como equivalente a auto.
Posso prever exatamente qual opção um navegador carrega? Não apenas com srcset. O padrão permite que o navegador escolha “de uma maneira definida pela implementação” e considere a densidade de pixels, o nível de zoom e, possivelmente, as condições de rede, portanto dois navegadores podem carregar arquivos diferentes a partir da mesma marcação. Já a escolha entre elementos source é baseada em regras: o navegador os avalia em ordem e usa o primeiro cuja consulta media corresponda e cujo type seja suportado, considerando atendida a condição de um atributo ausente. Reserve media para direção de arte, quando um recorte diferente precisa ser exibido, e deixe o navegador decidir entre resoluções.
Como oferecer AVIF ou WebP com uma alternativa? Coloque um source por formato dentro de picture, cada um com um atributo type como type="image/webp", seguido de um img em um formato amplamente suportado. O navegador ignora qualquer source cujo tipo não seja suportado. Não omita type: sem esse atributo, o Padrão HTML informa que o navegador não passará para outro source depois de buscar uma imagem em um formato não suportado. Quando um recorte também for selecionado com media, forneça um source para esse recorte também no formato alternativo e coloque suas fontes antes das que se aplicam de forma mais ampla; caso contrário, um navegador que não consiga decodificar o formato mais novo acabará usando um recorte diferente.
O que muda quando o servidor escolhe a variante? Os caches precisam saber de quais cabeçalhos de requisição a escolha dependeu. Uma resposta selecionada por Accept ou por uma dica do cliente deve listar esse cabeçalho em Vary; caso contrário, um cache pode reutilizar uma variante para uma requisição que precisava de outra. Dicas como Sec-CH-Width são enviadas somente depois que o servidor solicita seu envio com Accept-CH, e a MDN classifica Sec-CH-Width como experimental, portanto verifique o suporte dos navegadores e mantenha um padrão adequado para requisições sem dicas.

Sirva variantes menores para telas estreitas e mantenha versões com maior densidade de pixels para telas de alta densidade. Regras incorretas de dimensionamento podem desperdiçar largura de banda ou deixar uma imagem visivelmente pouco nítida nas dimensões em que é renderizada.

O Smart CDN da Transloadit pode criar as variantes sob demanda. Uma URL tlcdn.com identifica seu Workspace, um Template e o arquivo de origem, e parâmetros de URL, como uma largura, preenchem variáveis de Template que configuram Robots como /image/resize. Uma requisição sem resultado no cache executa o Template; requisições com resultado no cache reutilizam o resultado armazenado. A escolha de qual URL um visitante carrega continua na sua marcação: as páginas vinculadas aqui descrevem variantes endereçadas por parâmetros de URL e não descrevem a seleção com base em cabeçalhos de requisição como Accept, portanto liste as URLs das variantes em srcset ou picture.

Toda requisição sem resultado no cache importa e transforma o arquivo e é contabilizada no uso: a primeira requisição para cada nova combinação de parâmetros e qualquer requisição posterior feita quando a cópia em cache já não está disponível, o que depende das suas configurações de cache. Resultados encontrados no cache não são transformados novamente. Limite as variáveis que um Template aceita e assine as URLs do Smart CDN para que os visitantes não possam solicitar variantes arbitrárias. Quando todos os tamanhos são conhecidos antes da publicação, executar uma Assembly uma vez e servir suas saídas armazenadas evita a transformação sob demanda.

Explore os recursos de imagem da Transloadit

O que são imagens adaptativas?

Como funcionam as imagens adaptativas

Informações essenciais

Quando as imagens adaptativas são importantes

Como a Transloadit ajuda com imagens adaptativas

Fontes

Transforme conhecimento sobre mídia em um pipeline funcional