A seção "Oportunidades" do relatório do Lighthouse lista todas as imagens em formatos mais antigos, mostrando as possíveis economias ganhas ao veicular versões AVIF dessas imagens:
Por que veicular imagens no formato AVIF ou WebP?
AVIF e WebP são formatos de imagem que têm características de compactação e qualidade superiores em comparação com os formatos JPEG e PNG mais antigos. Codificar suas imagens nesses formatos em vez de JPEG ou PNG significa que elas serão carregadas mais rapidamente e consumirem menos dados móveis.
O AVIF é compatível com Chrome, Firefox e Opera e oferece arquivos menores em comparação com outros formatos com as mesmas configurações de qualidade. Consulte o codelab Como veicular imagens AVIF para saber mais sobre o AVIF.
O WebP é compatível com as versões mais recentes do Chrome, Firefox, Safari, Edge e Opera e oferece melhor compactação com e sem perda para imagens na Web. Consulte Um novo formato de imagem para a Web para saber mais sobre o WebP.
Como o Lighthouse calcula a economia potencial
O Lighthouse coleta cada imagem BMP, JPEG e PNG na página, converte cada uma para WebP e estima o tamanho do arquivo AVIF informando a possível economia com base nos números de conversão.
Compatibilidade com navegadores
O WebP é compatível com as versões mais recentes do Chrome, Firefox, Safari, Edge e Opera, enquanto a compatibilidade com AVIF é mais limitada. Você precisará veicular uma imagem PNG ou JPEG substituta para ter compatibilidade com navegadores mais antigos. Consulte Como posso detectar a compatibilidade do navegador com o WebP? para ter uma visão geral das técnicas de substituição e a lista abaixo de suporte do navegador para formatos de imagem.
Para saber qual é o suporte atual dos navegadores para cada formato moderno, confira as entradas abaixo:
Orientações específicas para a pilha
AMP
Considere mostrar todos os
componentes amp-img
em formatos WebP ao especificar um substituto adequado
para outros navegadores.
Drupal
Considere instalar e configurar um módulo para aproveitar formatos de imagem WebP no seu site. Esses módulos geram automaticamente uma versão WebP das imagens enviadas para otimizar os tempos de carregamento.
Joomla
Use um plugin ou serviço que converta automaticamente as imagens enviadas para os formatos ideais.
Magento
Pesquise no Magento Marketplace uma variedade de extensões de terceiros para aproveitar formatos de imagem mais recentes.
iPhone
As imagens webp, avif e webm não funcionam em iPhones com versões anteriores ao iOS 16.
WordPress
Use um plugin ou serviço que converta automaticamente as imagens enviadas para os formatos ideais.