Skip to content
Aprender Medir Blog Case studies Sobre
Nesta página
  • Por que servir imagens no formato AVIF ou WebP?
  • Como o Lighthouse calcula a economia potencial
  • Compatibilidade de navegadores
  • Orientações para pilhas específicas
    • AMP
    • Drupal
    • Joomla
    • Magento
    • WordPress
  • Recursos

Sirva imagens em formatos modernos

May 2, 2019 — Atualizado May 29, 2020
Available in: Русский, English
Appears in: Auditorias de desempenho
Nesta página
  • Por que servir imagens no formato AVIF ou WebP?
  • Como o Lighthouse calcula a economia potencial
  • Compatibilidade de navegadores
  • Orientações para pilhas específicas
    • AMP
    • Drupal
    • Joomla
    • Magento
    • WordPress
  • Recursos

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:

Uma captura de tela da auditoria Lighthouse Sirva imagens em formatos modernos

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.

Experimente

Crie imagens WebP com a linha de comando

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.

O Lighthouse omite a imagem de seu relatório se a economia potencial for inferior a 8 KiB.

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:

  • AVIF
  • WebP

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.

Recursos #

  • Código-fonte para a auditoria Sirva imagens em formatos modernos
  • Use imagens WebP
Last updated: May 29, 2020 — Improve article
Codelabs

See it in action

Learn more and put this guide into action.

  • Creating WebP Images with the Command Line
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Web Fundamentals
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.