Skip to content
Aprender Medir Blog Case studies Sobre
Nesta página
  • Como o Lighthouse sinaliza imagens como otimizáveis
  • Como otimizar imagens
  • Otimize imagens usando ferramentas de GUI
  • Orientação específica para pilha
    • Drupal
    • Joomla
    • Magento
    • WordPress
  • Recursos

Codifique imagens de forma eficiente

May 2, 2019 — Atualizado Jun 20, 2019
Available in: Español, 日本語, 한국어, Русский, 中文, English
Appears in: Auditorias de desempenho
Nesta página
  • Como o Lighthouse sinaliza imagens como otimizáveis
  • Como otimizar imagens
  • Otimize imagens usando ferramentas de GUI
  • Orientação específica para pilha
    • Drupal
    • Joomla
    • Magento
    • WordPress
  • Recursos

A seção Oportunidades no seu relatório Lighthouse lista todas as imagens não otimizadas, com economia potencial em kibibytes (KiB). Otimize essas imagens para que a página carregue mais rápido e consuma menos dados:

Uma captura de tela da auditoria de codificação de imagens do Lighthouse com eficiência

Como o Lighthouse sinaliza imagens como otimizáveis #

O Lighthouse coleta todas as imagens JPEG ou BMP da página, define o nível de compactação de cada imagem como 85 e compara a versão original com a versão compactada. Se a economia potencial for de 4 KB ou mais, o Lighthouse sinaliza a imagem como otimizável.

Como otimizar imagens #

Existem várias etapas que você pode seguir para otimizar suas imagens, incluindo:

  • Usar CDNs de imagem
  • Compactar imagens
  • Substituir GIFs animados por vídeo
  • Remover imagens de carregamento lento
  • Veicular imagens responsivas
  • Veicular imagens com dimensões corretas
  • Usar imagens WebP

Otimize imagens usando ferramentas de GUI #

Outra abordagem é executar suas imagens por meio de um otimizador que você instala em seu computador e executa como uma GUI. Por exemplo, com ImageOptim, você arrasta e solta imagens em sua interface do usuário e, em seguida, ele as compacta automaticamente sem comprometer a qualidade de forma visível. Se você administra um site pequeno e pode otimizar manualmente todas as imagens, provavelmente essa opção é boa o bastante.

Squoosh é outra opção. Squoosh é mantido pela equipe do Google Web DevRel.

Orientação específica para pilha #

Drupal #

Considere o uso de um módulo que otimiza e reduz automaticamente o tamanho das imagens carregadas pelo site, mantendo a qualidade. Além disso, use os estilos de imagem responsivos integrados do Drupal (disponível no Drupal 8 e mais recente), para todas as imagens renderizadas no site.

Joomla #

Considere o uso de um plug-in de otimização de imagem que compacta suas imagens enquanto mantém a qualidade.

Magento #

Considere o uso de uma extensão de terceiros para o Magento, que otimiza as imagens.

WordPress #

Considere o uso de um plug-in de otimização de imagem para o WordPress, que compacta suas imagens enquanto mantém a qualidade.

Recursos #

  • Código-fonte para auditoria de imagens com codificação eficiente
Last updated: Jun 20, 2019 — Improve article
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.