Usando formatos de imagem modernos: AVIF e WebP

Recentemente publicamos o livro Addy's Image Optimization com tudo o que você precisa saber sobre imagens , como compactar, servir e manter imagens. Agora, envio com uma mensagem pessoal escrita à mão, assinada por Addy. Ir para o índice e obter o livro imediatamente.

As imagens são o tipo de recurso mais popular na web e geralmente são os maiores. Os usuários apreciam visuais de alta qualidade, mas é preciso ter cuidado para fornecer essas imagens de heróis, fotos de produtos e memes de gatos da maneira mais eficiente e eficaz possível.

Se você estiver otimizando para os Web Vitals, talvez esteja interessado em saber que as imagens representam ~42% do maior elemento de pintura de conteúdo para sites. As principais métricas centradas no usuário geralmente dependem do tamanho, número, layout e prioridade de carregamento das imagens na página. É por isso que muitas de nossas orientações sobre desempenho falam sobre otimização de imagem.

Um tl; dr de recomendações pode ser encontrado abaixo.

tl; dr

• O AVIF é a primeira escolha sólida se a compactação com perdas e de baixa fidelidade for aceitável e a economia de largura de banda for a prioridade número um. Supondo que as velocidades de codificação/decodificação atendam às suas necessidades.
• O WebP é mais amplamente suportado e pode ser usado para renderizar imagens regulares onde recursos avançados como ampla gama de cores ou sobreposições de texto não são necessários.
• O AVIF pode não ser capaz de compactar imagens não fotográficas, bem como PNG ou WebP sem perdas. A economia de compactação do WebP pode ser menor do que o JPEG para compactação com perdas de alta fidelidade.
• Se AVIF e WebP não forem opções viáveis, considere avaliar MozJPEG (otimizar imagens JPEG), OxiPNG (imagens não fotográficas) ou JPEG 2000 (imagens fotográficas com ou sem perdas).
• O aprimoramento progressivo via <picture> permite que o navegador escolha o primeiro formato suportado na ordem de preferência. Esta implementação é consideravelmente simplificada ao usar CDNs de imagem onde o cabeçalho de aceitação e a negociação de conteúdo (por exemplo, autoformatação e qualidade) podem servir a melhor imagem.

Por que precisamos de formatos modernos?

Temos uma seleção razoavelmente ampla de formatos de imagem para escolher ao renderizar imagens na web. A diferença essencial entre os formatos de imagem é que o codec de imagem usado para codificar ou decodificar cada tipo de imagem é diferente. Um codec de imagem representa o algoritmo usado para compactar e codificar imagens em um tipo de arquivo específico e decodificá-las para exibição na tela.

Avaliando codecs

Você pode avaliar qual formato de imagem é adequado para você com base em diferentes parâmetros.

• Compressão
  A eficiência de um codec pode ser medida principalmente pela quantidade de compactação que ele pode alcançar. A compactação alcançada é relevante porque quanto maior a compactação, menor o tamanho do arquivo e menores os dados necessários para transferir a imagem na rede. Um tamanho de arquivo menor afeta diretamente a métrica de maior conteúdo de pintura (LCP) para a página, pois os recursos de imagem necessários para a página são carregados mais rapidamente.
• Qualidade
  Idealmente, a compactação não deve resultar em perda de dados de imagem; deve ser sem perdas. Formatos de compactação que resultam em alguma perda de dados de imagem, reduzindo assim a qualidade da imagem, são conhecidos como com perdas. Você pode usar ferramentas como DSSIM ou ssimulacra para medir a semelhança estrutural entre as imagens e julgar se a perda de qualidade é aceitável.
• Velocidade de codificação/decodificação
  Algoritmos de compressão complexos podem exigir maior poder de processamento para codificar/decodificar imagens. Isso pode ser complicado se a codificação estiver sendo feita antecipadamente (estático/compilação) ou em tempo real (sob demanda). Embora a codificação possa ser única no caso de imagens estáticas, o navegador ainda precisa decodificar as imagens antes de renderizá-las. Um processo de decodificação complexo pode retardar a renderização de imagens.

O grau de compactação, a qualidade da imagem e a velocidade de decodificação são fatores-chave a serem considerados ao comparar o desempenho da imagem para a web. Casos de uso específicos podem exigir formatos de imagem compatíveis com outros recursos, como:

• Suporte de software: Um formato de imagem pode funcionar muito bem, mas é inútil se os navegadores, CDNs e outras ferramentas de manipulação de imagem não o reconhecerem.
• O suporte de animação pode ser necessário para algumas imagens na web (por exemplo, GIF). No entanto, o ideal é substituir essas imagens por vídeos.
• Transparência Alfa: A capacidade de criar imagens com diferentes níveis de opacidade usando o canal alfa. (por exemplo, imagens PNG com fundos transparentes)
• Ele deve suportar imagens de alta faixa dinâmica (HDR) e ampla gama de cores.
• A decodificação progressiva para carregar imagens gradualmente permite que os usuários obtenham uma visualização razoável da imagem antes que ela seja refinada.
• Mapas de profundidade que permitem aplicar efeitos ao primeiro ou segundo plano da imagem.
• Imagens com várias camadas sobrepostas, por exemplo, sobreposições de texto, bordas e assim por diante.

Dica: Ao avaliar a qualidade, compactação e ajuste fino de formatos modernos, a capacidade do Squoosh.app de realizar uma comparação visual lado a lado é útil. Aumentar o zoom permite que você aprecie melhor onde um formato exibe blocos ou artefatos de borda para raciocinar sobre compensações.

A Velha Guarda: JPEG E PNG

JPEG tem sido o formato de imagem mais amplamente suportado por 25 anos. Os codificadores JPEG clássicos levam a uma compactação relativamente fraca, enquanto os esforços de codificação JPEG mais modernos (como o MozJPEG) melhoram a compactação, mas não são tão ideais quanto os formatos modernos. JPEG também é um formato de compressão com perdas. Embora a velocidade de decodificação para JPEGs seja excelente, ela não possui outros recursos desejáveis ​​necessários para imagens em sites modernos e atraentes. Ele não suporta transparência em imagens, animação, mapas de profundidade ou sobreposições.

JPEG funciona melhor com fotografias, enquanto PNG é sua contraparte para outras imagens estáticas. PNG é um formato sem perdas e pode suportar transparência alfa, mas a compactação alcançada, especialmente para fotografias, é consideravelmente baixa. JPEG e PNG são usados ​​extensivamente dependendo do tipo de imagem necessária.

O objetivo dos formatos de imagem modernos é, portanto, superar as limitações de JPEG e PNG, oferecendo melhor compactação e flexibilidade para suportar os outros recursos discutidos anteriormente. Com este pano de fundo, vejamos o que AVIF e WebP têm a oferecer.

AVIF

O formato de arquivo de imagem AV1 (AVIF) é um formato de imagem de código aberto para armazenar imagens estáticas e animadas. Foi lançado em fevereiro de 2019 pela Alliance for Open Media (AOMedia). AVIF é a versão de imagem do popular formato de vídeo AV1. O objetivo era desenvolver um novo formato de codificação de vídeo de código aberto que fosse de última geração e livre de royalties.

Benefícios AVIF

O AVIF suporta compactação com e sem perdas muito eficiente para produzir imagens de alta qualidade após a compactação O AVIF comprime muito melhor do que os formatos mais populares da Web atualmente (JPEG, WebP, JPEG 2000 e assim por diante). As imagens podem ser até dez vezes menores que JPEGs de qualidade visual semelhante. Alguns testes mostraram que o AVIF oferece uma economia de 50% no tamanho do arquivo em comparação com o JPEG com qualidade perceptiva semelhante . Observe que pode haver casos em que o WebP sem perdas pode ser melhor do que o AVIF sem perdas, portanto, certifique-se de avaliar manualmente.

Aqui, você pode ver uma comparação de tamanho entre uma imagem JPEG e sua imagem AVIF correspondente (com perdas) convertida usando o aplicativo Squoosh:

Além da compactação superior, o AVIF também oferece os seguintes recursos:

• O AVIF suporta animações, fotos ao vivo e muito mais por meio de imagens multicamadas armazenadas em sequências de imagens.
• Oferece melhor suporte para elementos gráficos, logotipos e infográficos, onde o JPEG tem limitações.
• Ele fornece melhor compactação sem perdas do que JPEG.
• Ele suporta doze bits de profundidade de cor, permitindo imagens de alta faixa dinâmica (HDR) e ampla gama de cores (WCG) com uma melhor amplitude de tons claros e escuros e uma faixa mais ampla de luminosidade.
• Inclui suporte para imagens monocromáticas e imagens multicanal, incluindo imagens transparentes que usam o canal alfa.

Comparando formatos

Para entender melhor as diferenças de qualidade e compactação oferecidas pelos diferentes formatos, podemos comparar visualmente as imagens e avaliar as diferenças.

Avaliando Qualidade e Compressão

Começaremos nossa avaliação de qualidade de JPEG, WebP e AVIF usando as configurações padrão de saída de alta qualidade do Squoosh para cada formato - intencionalmente desafinadas para imitar a experiência de um novo usuário com eles. Como lembrete, você deve avaliar a configuração de qualidade e os formatos que melhor atendem às suas necessidades. Se você estiver com pouco tempo, as CDNs de imagem automatizam parte disso.

Neste primeiro teste, a codificação de uma foto de 560KB de um pôr do sol (com muitas texturas) produz uma imagem visualmente e perceptualmente bastante semelhante para cada um. A saída chega a 289 KB (JPEG@q75), 206 KB (WebP@q75) e 101 KB (AVIF@q30) — até 81% em economia de compactação.

Grande coisa, mas vamos cavar mais fundo.

Existem várias ferramentas para comparar a dissimilaridade entre diferentes formatos de imagem (por exemplo, DSSIM, simulacros). Usando essas ferramentas, você pode aproximar a configuração de qualidade comparável ao avaliar, digamos, JPEG para WebP ou WebP para AVIF. Abaixo estão as mesmas imagens codificadas com qualidade comparável, visando a qualidade de 70% do JPEG. A saída é 323 KB (JPEG), 214 KB (WebP@q75) e 117 KB (AVIF@60) — os tamanhos são um pouco maiores do que confiar nos padrões, mas as vitórias de compactação ainda são significativas.

Também podemos observar qualidade inferior em cada formato, que é realmente onde o WebP e o AVIF brilham. Aqui está JPEG@q10 (35KB), WebP@q1 (35KB), AVIF@q17 (36KB) — o WebP tem significativamente menos artefatos em blocos em comparação com o JPEG, enquanto o AVIF é menos em blocos e é mais nítido nos principais detalhes da imagem .

Nota: Este pôr do sol é uma imagem de resolução mais alta ( 2400 × 1595 ), e em telas 2×, a qualidade pode ser muito menor e ainda parecer nítida dependendo de como os usuários interagem com a imagem (por exemplo, quanto eles apertam e ampliam).

Para um exemplo mais extremo das diferenças entre JPEG e AVIF, podemos ver um exemplo do conjunto de dados Kodak (avaliado pela Netflix) comparando um JPEG (4:4:4) a 20 KB com um AVIF (4:4:4) em 19,8 KB. Observe como o JPEG tem artefatos em blocos visíveis no céu e no telhado. O AVIF é visivelmente melhor, contendo menos artefatos de bloqueio. Há, no entanto, um nível de perda de textura no teto e alguns borrões. Ainda é bastante impressionante, dado que o fator de compressão geral é de 59x.

Em seguida, vamos avaliar a qualidade de uma imagem de praia com muitos detalhes finos, texturas e áreas de baixo contraste nas nuvens. Compararemos o original (em 482 KB) com o que JPEG, WebP e AVIF podem produzir com um limite de tamanho de arquivo de 45 KB (sem ajuste avançado) — usando Squoosh; isso funciona em JPEG (MozJPEG) com 50% de qualidade, WebP com 54% e AVIF com 36%.

O JPEG tem artefatos em blocos e faixas de cores visíveis nas nuvens e na água, enquanto o WebP e o AVIF têm visivelmente menos desse bloco observável. Na minha opinião, o AVIF oferece a experiência geral mais suave de todos os três.

Falando em texturas, também podemos realizar uma avaliação semelhante de qualidade inferior em um pôster da Netflix para “The Witcher” (com 36 KB). Observe o bloco nas nuvens para o JPEG e alguns borrões ao redor do texto vermelho para WebP (que suporta apenas subamostragem de croma 4:2:0 sem soluções alternativas). O AVIF parece melhor, seguido pelo WebP.

Finalmente, vamos ver uma foto com muito mais elementos de texto do que as imagens anteriores — um pôster. Quando descemos para qualidades inferiores e visamos um tamanho razoavelmente pequeno (25 KB), podemos observar que o JPEG possui faixas de cores fortes e halos ao redor do texto. Existem artefatos em blocos claros ao redor das bordas. O WebP evita uma quantidade de blocos, parecendo cada vez melhor. O AVIF preserva as bordas nítidas um pouco melhor do que JPEG ou WebP, produzindo uma imagem suave.

Comparações adicionais de formato versus qualidade estão disponíveis para fotografia e ilustrações.

Ferramentas e suporte AVIF

Desde seu lançamento em 2019, o suporte para AVIF aumentou consideravelmente. Embora não houvesse um método direto para criar ou visualizar arquivos AVIF anteriormente, você pode fazê-lo facilmente agora com os utilitários de código aberto disponíveis.

Imagens AVIF no navegador

O AVIF foi introduzido na versão desktop do Chrome em agosto de 2020 com o Chrome 85. Também é compatível com Chrome para Android, Opera e Firefox para desktop e Opera para Android.

Para incluir uma imagem AVIF em sua página, você pode adicioná-la como um elemento de imagem. No entanto, os navegadores que não suportam AVIF não podem renderizar esta imagem.

 <img src="/images/sky.avif" width="360" height="240" alt="a beautiful sky">

Uma solução alternativa para garantir que pelo menos um formato de imagem compatível seja entregue a todos os navegadores é aplicar o AVIF como um aprimoramento progressivo . Existem duas maneiras de fazer isso.

Aprimoramento progressivo

1. Usando o elemento <picture>
   Como <picture> permite que os navegadores ignorem imagens que não reconhecem, você pode incluir imagens em sua ordem de preferência. O navegador seleciona o primeiro que ele suporta.

 <picture> <source type="image/avif"> <source type="image/webp"> <img src="img/photo.jpg" alt="Description" width="360" height="240"> </picture>

1. Usando a negociação de conteúdo
   A negociação de conteúdo permite que o servidor atenda a diferentes formatos de recursos com base no que é suportado pelo navegador. Os navegadores que suportam um formato específico podem anunciá-lo adicionando o formato ao seu cabeçalho de solicitação de aceitação. Por exemplo, o cabeçalho de solicitação de aceitação para imagens no Chrome é:
   Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8
   O código para verificar se o AVIF é suportado no manipulador de eventos de busca pode ser algo assim:
   const hdrAccept = event.request.headers.get("accept");
const sendAVIF = /image\/avif/.test(hdrAccept);
   Você pode usar esse valor para fornecer AVIF ou qualquer outro formato padrão ao cliente.

Criar a marcação para aprimoramento progressivo pode ser assustador. Image CDN's oferecem a opção de atender automaticamente o melhor formato adequado ao cliente. No entanto, se você não estiver usando uma CDN de imagem, considere usar uma ferramenta como just-gimme-an-img. Esta ferramenta pode gerar a marcação do elemento de imagem para uma determinada imagem com diferentes formatos e larguras. Ele também cria as imagens correspondentes à marcação usando o Squoosh inteiramente do lado do cliente. Nota: a codificação de vários formatos pode demorar um pouco, então você pode tomar um café enquanto espera.

Observação: CDNs de imagem são mencionados algumas vezes neste artigo. Os servidores CDN geralmente estão localizados mais próximos dos usuários do que os servidores de origem e podem ter tempos de ida e volta (RTT) mais curtos, melhorando a latência da rede. Dito isso, servir de uma origem diferente pode adicionar viagens de ida e volta e impactar nos ganhos de desempenho. Isso pode ser bom se a CDN estiver veiculando outro conteúdo do site, mas, em caso de dúvida, experimente e avalie.

Codifique e decodifique arquivos AVIF

Vários projetos de código aberto fornecem métodos diferentes para codificar/decodificar arquivos AVIF:

• Bibliotecas
  Libaom é o codificador e decodificador de código aberto mantido pela AOMedia, os criadores do AVIF. A biblioteca é continuamente atualizada com novas otimizações que visam reduzir o custo de codificação AVIF, especialmente para imagens carregadas com frequência ou de alta prioridade. Libavif é um misturador e analisador de código aberto para AVIF usado no Chrome para decodificar imagens AVIF. Você pode usar o libavif com o libaom para criar arquivos AVIF a partir de imagens originais não compactadas ou transcodificá-los de outros formatos. Há também Libheif, um popular codificador/decodificador AVIF/HEIF e Cavif. Graças a Ben Morss, a libgd suporta AVIF e também chegará ao PHP em novembro.
• Aplicativos da Web e aplicativos de desktop
  O Squoosh, um aplicativo da web que permite usar diferentes compressores de imagem, também suporta AVIF, tornando relativamente simples converter e criar arquivos .avif online. Na área de trabalho, o GIMP suporta exportação AVIF. ImageMagick e Paint.net também suportam AVIF, enquanto plugins da comunidade do Photoshop para AVIF também estão disponíveis.
• Bibliotecas JavaScript
  
  • AVIF.js é um polyfill AVIF para navegadores que ainda não suportam AVIF. Ele usa a API do Service Worker para interceptar o evento de busca e decodificar arquivos AVIF.
  • Avif.io é outro utilitário da web que pode converter arquivos de diferentes tipos de imagem para AVIF no lado do cliente. Ele chama o código Rust no navegador usando um WebWorker. A biblioteca do conversor é compilada para WASM usando wasm-pack.
  • O Sharp é um módulo Node.js que pode converter imagens grandes em formatos padrão em imagens menores amigáveis ​​para a Web, incluindo imagens AVIF.
• Serviços de utilidade pública
  Os utilitários de conversão ou transformação de imagem suportam o formato AVIF. Você pode usar o MP4Box para criar e decodificar arquivos AVIF.
• Em código
  go-avif implementa um codificador AVIF para Go usando libaom . Ele vem com um utilitário chamado avif que pode codificar arquivos JPEG ou PNG para AVIF.

Qualquer pessoa interessada em aprender como criar imagens AVIF usando Squoosh ou construir o codificador de linha de comando avifenc pode fazê-lo no codelab em servir arquivos AVIF.

AVIF e desempenho

O AVIF pode reduzir o tamanho do arquivo de imagens devido à melhor compactação. Como resultado, os arquivos AVIF são baixados mais rapidamente e consomem menos largura de banda. Isso pode potencialmente melhorar o desempenho reduzindo o tempo de carregamento das imagens.

A auditoria de práticas recomendadas do Lighthouse agora considera que a compactação de imagens AVIF pode trazer melhorias significativas. Ele coleta todas as imagens BMP, JPEG e PNG na página, converte-as em WebP e estima o tamanho do arquivo AVIF. Essa estimativa ajuda o Lighthouse a relatar as economias potenciais na seção "Servir imagens em formatos de última geração".

Tim Vereecke relatou uma economia de bytes de 25% e um impacto positivo no LCP (comparado ao JPEG) depois de converter 14 milhões de imagens no site para AVIF medido usando Real User Monitoring (RUM).

Pegadinhas AVIF

A maior desvantagem do AVIF no momento é que ele não possui suporte uniforme entre os navegadores. A introdução do AVIF como um aprimoramento progressivo ajuda a superar isso. Alguns outros aspectos em que o AVIF não atende aos padrões ideais para um formato de arquivo moderno.

• As versões modernas do Chrome (Chrome 94+) oferecem suporte à renderização progressiva AVIF, enquanto as versões mais antigas não. Embora no momento em que escrevo não haja um codificador que possa criar essas imagens facilmente, há esperança de que isso mude.
• As imagens AVIF demoram mais para serem codificadas e criadas. Isso pode ser um problema para sites que criam arquivos de imagens dinamicamente. No entanto, a equipe AVIF está trabalhando para melhorar as velocidades de codificação. Os colaboradores do AVIF no Google também relataram alguns bons ganhos de desempenho. Desde 1º de janeiro de 2021, a codificação AVIF teve uma melhoria de ~ 47% no tempo de transcodificação (essa é a velocidade 6, o padrão atual para libavif) e ao longo do ano civil uma melhoria de 73%. Desde julho, também houve uma melhoria de 72% nos tempos de transcodificação na velocidade 9 (codificação em tempo real).

• A decodificação de imagens AVIF para exibição também pode consumir mais energia da CPU do que outros codecs, embora tamanhos de arquivo menores possam compensar isso.
• Alguns CDNs ainda não suportam AVIF por padrão para seus modos de formato automático porque ainda pode ser mais lento para gerar na primeira solicitação.

WebP

Mencionamos o WebP algumas vezes, mas vamos cobrir brevemente sua história. O Google criou o formato WebP em 2011 como um formato de imagem que ajudaria a tornar a web mais rápida. Ao longo dos anos, foi amplamente aceito e adotado devido à sua capacidade de compactar imagens em tamanhos de arquivo menores em comparação com JPEG e PNG. O WebP oferece compactação sem perdas e com perdas em uma qualidade visual aceitável e suporta transparência e animação de canal alfa.

A compressão Lossy WebP é baseada no codec de vídeo VP8 e usa codificação preditiva para codificar uma imagem. Ele usa valores nos blocos de pixels vizinhos para prever o valor em um bloco e codifica apenas a diferença. As imagens WebP sem perdas são geradas aplicando várias técnicas de transformação às imagens para comprimi-las.

Benefícios WebP

Imagens sem perdas WebP são geralmente 26% menores que PNG, e imagens com perdas WebP são 25–34% menores que imagens JPEG de qualidade semelhante. O suporte de animação também os torna um excelente substituto para imagens GIF. O seguinte mostra uma imagem PNG transparente à esquerda e a imagem WebP correspondente à direita gerada pelo aplicativo Squoosh com uma redução de tamanho de 26%.

Além disso, o WebP oferece outros benefícios como:

• Transparência
  O WebP possui um canal de transparência de 8 bits sem perdas com apenas 22% mais bytes que o PNG. Ele também suporta transparência RGB com perdas, que é um recurso exclusivo do WebP.
• Metadados
  O formato de arquivo WebP suporta metadados de fotos EXIF ​​e metadados de documentos digitais da Plataforma de Metadados Extensíveis (XMP). Também pode conter um perfil de cores ICC.
• Animação
  O WebP suporta imagens animadas em cores reais.

Observação: no caso de imagens transparentes, semelhantes a vetores, como as acima, um SVG otimizado pode fornecer um arquivo menor e mais nítido em comparação com um formato raster.

Ferramentas e suporte WebP

Ao longo dos anos, outros ecossistemas além do Google adotaram o WebP, e existem muitas ferramentas disponíveis para criar, visualizar e carregar arquivos WebP.

Servindo e visualizando arquivos WebP

O WebP é suportado nas versões mais recentes de quase todos os principais navegadores atuais.

Se os desenvolvedores desejarem servir WebP em outros navegadores no futuro, eles podem fazê-lo usando o elemento <picture> ou cabeçalhos de solicitação, conforme mostrado na seção sobre AVIF.

As redes de entrega de conteúdo de imagem (CDN) também suportam imagens responsivas com seleção automática de formato para imagens em WebP ou AVIF, dependendo do suporte do navegador. Os plug-ins WebP estão disponíveis para outras pilhas populares como WordPress, Joomla, Drupal, etc. O suporte inicial para WebP também está disponível no núcleo do WordPress, começando com o WordPress 5.8.

Você pode visualizar imagens WebP facilmente abrindo-as em um navegador que as suporte. Além disso, você também pode visualizá-los no Windows e no macOS usando um complemento. A instalação do plug-in Quick Look para WebP ( qlImageSize ) permite visualizar arquivos WebP usando o utilitário Quick Look. A equipe WebP publicou bibliotecas e utilitários pré-compilados para o codec WebP para Windows, macOS e Linux. Usá-los no Windows permite visualizar imagens WebP no Explorador de Arquivos ou no Visualizador de Fotos do Windows.

Convertendo imagens para WebP

Além das bibliotecas fornecidas pela equipe do WebP, várias ferramentas de edição de imagem gratuitas, de código aberto e comerciais suportam o WebP.

Serviços de utilidade pública:
Assim como o AVIF, o Squoosh também pode converter arquivos para WebP online, conforme mostrado na seção anterior. XnConvert é um utilitário que você pode instalar na área de trabalho para converter diferentes formatos de imagem, incluindo WebP. O XnConvert também pode ajudar na remoção e edição de metadados, corte e redimensionamento, brilho e contraste, personalização de profundidade de cor, desfoque e nitidez, máscaras e marcas d'água e outras transformações.

Módulos Node.js:
Imagemin é um módulo de minificação de imagem popular com um complemento para converter imagens para WebP (imagemin-webp). O complemento suporta os modos WebP com e sem perdas.

Outras:
Vários aplicativos para conversão e manipulação de imagens suportam o formato WebP. Estes incluem Sketch, GIMP, ImageMagick, etc. Um plug-in do Photoshop para WebP também está disponível.

Uso de produção WebP

Devido aos seus benefícios de compactação sobre JPEG e PNG, muitas grandes empresas usam WebP em produção para reduzir custos e diminuir o tempo de carregamento de páginas da web. O Google relata uma economia de 30 a 35% usando o WebP em relação a outros esquemas de compactação com perdas, atendendo a 43 bilhões de solicitações de imagens por dia, 26% delas sendo compactação sem perdas.

Para alcançar sua grande base de usuários em mercados emergentes onde os dados são caros, o Facebook começou a fornecer imagens WebP para usuários do Android. Eles observaram “economia de dados de 25 a 35% em comparação com JPG e 80% em comparação com PNG”.

Pegadinhas da WebP

Em seus primeiros dias, uma desvantagem substancial do WebP era a falta de suporte a navegadores e ferramentas. Ainda há poucas compensações com o WebP ao considerar todos os recursos que um formato moderno deve suportar idealmente.

• O WebP está limitado à precisão de cores de 8 bits. Como resultado, ele não suporta imagens HDR/ampla gama.
• O WebP não oferece suporte a imagens com perdas sem subamostragem de croma. O Lossy WebP funciona exclusivamente com um YCbCr 4:2:0 de 8 bits, enquanto o Lossy WebP funciona com o formato RGBA. Isso pode afetar imagens com detalhes finos, texturas cromáticas ou texto colorido. Veja abaixo um exemplo.
• Ele não suporta decodificação progressiva, mas suporta decodificação incremental. Isso pode compensar um pouco isso, mas o efeito na renderização pode ser diferente.

Idealmente, você deve gerar arquivos WebP a partir dos arquivos de origem de melhor qualidade disponíveis. Converter JPEGs abaixo do padrão para WebPs não é muito eficiente, pois você perde em qualidade duas vezes.

Resumo

Resumindo todas as informações sobre os quatro formatos JPEG, PNG, AVIF e WebP e comparando e quantificando os pontos fortes e fracos apresentados na seção anterior, chegamos à tabela a seguir.

Observação: o número de estrelas é baseado em uma opinião geral e pode diferir para casos de uso específicos.

A seguir estão alguns dos pontos-chave a serem considerados ao se referir a esta tabela.

• A compactação para imagens fotográficas e não fotográficas pode diferir ainda mais com base na fidelidade (qualidade) das imagens. Indicamos aqui uma pontuação geral.
• Você deve escolher as configurações de subamostragem de qualidade e croma com base na finalidade das imagens. Imagens de baixa a média fidelidade podem ser aceitáveis ​​na maioria dos cenários na web, por exemplo, para notícias, mídia social e comércio eletrônico. Sites de arquivamento de imagens, filmes ou fotografia exigem imagens de alta fidelidade. Você deve testar a economia real devido à compactação para alta fidelidade antes de converter para outro formato.
• A falta de suporte e velocidade de decodificação progressiva pode ser um problema para codificação/decodificação de arquivos AVIF. Para sites com imagens de tamanho médio, a economia de bytes devido à compactação pode compensar a velocidade e a ausência de decodificação progressiva, pois as imagens são baixadas rapidamente.
• Ao comparar a compactação oferecida pelos formatos de imagem, compare os tamanhos dos arquivos no mesmo DSSIM.
• A configuração de qualidade usada na codificação não precisa ser a mesma para formatos diferentes para produzir a mesma qualidade de imagens. Um JPEG codificado com uma configuração de qualidade de 60 pode ser semelhante a um AVIF com uma configuração de qualidade de 50 e um WebP com uma configuração de qualidade de 65, conforme sugerido por este post.
• Estudos extensivos ainda são necessários para medir o impacto real no LCP ao comparar formatos.
• Não incluímos outros formatos como JPEG XL e HEIC nesta comparação. O JPEG XL ainda está em um estágio relativamente incipiente e apenas os dispositivos Apple suportam HEIC (enquanto o Safari não). Taxas de royalties e licenças complicam ainda mais o suporte para HEIC.

O AVIF verifica a maioria das caixas em geral, e o WebP tem melhor suporte e oferece melhor compactação quando comparado ao JPEG ou PNG. Como tal, você deve, sem dúvida, considerar o suporte WebP ao otimizar imagens em seu site. Avaliar se o AVIF atende aos seus requisitos e apresentá-lo como um aprimoramento progressivo pode agregar valor à medida que o formato for adotado em diferentes navegadores e plataformas. Com ferramentas de comparação de qualidade e a melhoria das velocidades de codificação, o uso de AVIF ficaria mais fácil.

Com agradecimentos a Leena Sohoni-Kasture por sua forte contribuição neste artigo, bem como Patrick Meenan, Frank Galligan e Yoav Weiss por suas revisões.

Uma nota sensacional

No início deste ano, publicamos um novo livro com Addy sobre tudo o que você precisa saber para otimizar como compactar, veicular e manter imagens, aumentando o desempenho ao longo do caminho. Estamos enviando os livros gratuitamente para todo o mundo , e se você adquirir o livro agora, também receberá um cartão postal escrito à mão por Addy com uma mensagem pessoal.

• Ir para os detalhes ↓
• Baixe uma amostra gratuita em PDF (12 MB)
• Envio gratuito de correio aéreo mundial para livros impressos.
• Pegue o livro imediatamente.