Codifique imagens de forma eficiente

Published on Updated on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

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:

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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.