Sirva imagens em formatos modernos
A seção Oportunidades de seu relatório Lighthouse lista todas as imagens em formatos mais antigos, mostrando a economia potencial obtida servindo versões AVIF dessas imagens:
Por que servir imagens no formato AVIF ou WebP? #
AVIF e WebP são formatos de imagem que têm características de compressão e qualidade superiores em comparação com seus equivalentes JPEG e PNG mais antigos. Codificar suas imagens nesses formatos em vez de JPEG ou PNG significa que elas carregarão mais rápido e consumirão menos dados de celular.
O formato AVIF é suportado no Chrome, Firefox e Opera e oferece tamanhos de arquivo menores em comparação com outros formatos com as mesmas configurações de qualidade. Veja o Codelab Servindo imagens AVIF para mais informações sobre AVIF.
O WebP é suportado nas versões mais recentes do Chrome, Firefox, Safari, Edge e Opera e oferece melhor compactação com e sem perdas para imagens na web. Veja Um novo formato de imagem para a Web para mais informações sobre WebP.
Como o Lighthouse calcula a economia potencial #
O Lighthouse coleta cada imagem BMP, JPEG e PNG da página, converte cada uma em WebP e estima o tamanho do arquivo AVIF, relatando a economia potencial com base nos números de conversão.
Compatibilidade de navegadores #
O formato WebP é suportado pelas versões mais recentes do Chrome, Firefox, Safari, Edge e Opera, enquanto o suporte para AVIF é mais limitado. Você precisará servir uma imagem PNG ou JPEG de fallback para suporte a navegadores mais antigos. Veja Como posso detectar o suporte do navegador a WebP? para uma visão geral das técnicas de fallback e a lista abaixo para suporte de navegador de formatos de imagem.
Para conhecer o suporte atual de navegadores para cada formato moderno, verifique os links abaixo:
Orientações para pilhas específicas #
AMP #
Considere exibir todos os componentes amp-img em formatos WebP enquanto especifica um fallback apropriado para outros navegadores.
Drupal #
Considere instalar e configurar um módulo para aproveitar os formatos de imagem WebP em seu site. Esses módulos geram automaticamente uma versão WebP de suas imagens carregadas para otimizar os tempos de carregamento.
Joomla #
Considere o uso de um plugin ou serviço que irá converter automaticamente suas imagens carregadas para os formatos ideais.
Magento #
Considere pesquisar no Magento Marketplace por uma variedade de extensões de terceiros para aproveitar os formatos de imagem mais recentes.
WordPress #
Considere o uso de um plugin ou serviço que irá converter automaticamente suas imagens carregadas para os formatos ideais.