O que são formatos de nova geração?

Formatos de imagem de nova geração são formatos mais recentes, como WebP, AVIF e JPEG XL, que buscam melhor compressão, recursos adicionais ou ambos. O termo é informal e muda conforme os formatos e o suporte evoluem.

A expressão vem em grande parte do Lighthouse, cuja auditoria “Serve images in next-gen formats” é onde muitos desenvolvedores a encontram. A lista por trás do rótulo mudou: o Lighthouse 6 descrevia os formatos como JPEG 2000, JPEG XR e WebP, enquanto o Lighthouse 12 cita WebP e AVIF. A documentação do Chrome agora intitula a auditoria “Serve images in modern formats” e informa que ela passou a fazer parte da análise “Improve image delivery” a partir do Lighthouse 13. O JPEG XL (ISO/IEC 18181) também costuma ser incluído. Os candidatos diferem substancialmente nos modos com e sem perdas, no tratamento de alfa, na animação, na alta faixa dinâmica e nos metadados, e a adoção depende de codificadores, navegadores, sistemas operacionais e ferramentas de edição, não apenas da idade.

Em um relatório do Lighthouse, o rótulo tem um significado preciso. O Lighthouse 12 avalia as respostas de imagem que o navegador realmente carregou: examina apenas as identificadas como BMP, JPEG ou PNG e lista uma quando a economia estimada com AVIF é de pelo menos 8.192 bytes. Uma imagem servida como JPEG XL, portanto, fica fora da lista porque não é examinada, não porque é considerada moderna, e quando um navegador ignora um <source> de JPEG XL e carrega a alternativa JPEG, esse JPEG é examinado. A economia é o tamanho da imagem carregada menos um tamanho AVIF estimado que não vem de um codificador AVIF: a estimativa é a média entre metade do tamanho de uma recodificação JPEG com qualidade 0,92 e 80 por cento de uma recodificação WebP com qualidade 0,85, ambas solicitadas ao navegador, e, para imagens acima de 2.000 KiB ou após 5 segundos gastos em recodificação, ela é calculada apenas pelas dimensões em pixels. Trate a economia informada como um indício a verificar.
Os formatos têm projetos diferentes, não são contêineres intercambiáveis. O AVIF armazena imagens codificadas em AV1 em um arquivo HEIF. O WebP é um contêiner RIFF que contém dados VP8 com perdas ou WebP sem perdas. O JPEG XL tem seu próprio fluxo codificado e formato de arquivo baseado em caixas e, entre os três, é o único que pode transcodificar sem perdas um JPEG existente e restaurar depois o arquivo JPEG idêntico.
O suporte dos navegadores precisa ser verificado por formato e por recurso. Segundo os dados do caniuse, o WebP tem suporte completo no Safari a partir da versão 16.0, e as versões 14.0 a 15.6 exigem macOS 11 ou posterior; o suporte ao AVIF existe desde o Chrome 85 e o Firefox 93, mas só é completo a partir do Safari 16.4 e do Edge 121. A MDN lista JPEG XL a partir do Chrome 155, Edge 155, Firefox 158 e Safari 17; o caniuse concorda, exceto por ainda não listar o Edge 155, e classifica o suporte do Safari como parcial: apenas imagens estáticas, sem decodificação progressiva. Em um elemento <picture>, o navegador ignora qualquer <source> cujo type não seja compatível, o que permite usar uma alternativa JPEG ou PNG.
A decodificação nos navegadores diz pouco sobre o restante de uma cadeia de ferramentas. A documentação do Pillow, por exemplo, informa que ele salva apenas AVIF de 8 bits e decodifica todo AVIF como RGB ou RGBA de 8 bits, e a documentação do sharp informa que sequências de imagens AVIF não são compatíveis. Verifique editores, ferramentas de metadados e bibliotecas do lado do servidor separadamente para cada recurso do qual você depende.
Uma saída menor depende do conteúdo. A MDN cita o WebP com perdas como, em média, 25 a 35 por cento menor que o JPEG em níveis de compressão visualmente semelhantes e o WebP sem perdas como tipicamente 26 por cento menor que o PNG, mas as médias não se aplicam a toda imagem: colaboradores do libavif descrevem o AVIF sem perdas como eficiente para imagens semelhantes a fotografias e esperam um desempenho muito pior que o WebP sem perdas em conteúdo gráfico. Compare os candidatos com suas próprias fotografias, elementos gráficos e imagens transparentes na qualidade que você pretende disponibilizar.

Sirva um formato mais recente quando os ganhos de tamanho e qualidade medidos nas suas próprias imagens justificarem a codificação e o armazenamento adicionais. Mantenha uma alternativa JPEG ou PNG, por exemplo, por meio de um elemento <picture> cujas entradas <source> declarem seu tipo de mídia, pois o suporte em navegadores, decodificadores, edição e metadados pode variar.

A tabela de formatos de imagem da Transloadit lista WebP, AVIF e JPEG XL (JXL) como formatos que seus Robots baseados no ImageMagick, incluindo /image/resize, podem ler e gravar, e o parâmetro format desse Robot aceita qualquer formato que a tabela marque como gravável.

A tabela é paginada e ordenada por nome, portanto a linha WebP está em uma página posterior. A documentação de /image/resize descreve seu parâmetro quality apenas para JPG e PNG, portanto compare o tamanho e a qualidade da saída usando suas próprias imagens.

Explore os formatos de arquivo e os recursos de compressão da Transloadit

O que são formatos de nova geração?

Como funcionam os formatos de nova geração

Informações essenciais

Quando os formatos de nova geração são relevantes

Como a Transloadit ajuda com formatos de nova geração

Fontes

Transforme conhecimento sobre mídia em um pipeline funcional