Codifique imagens de forma eficiente

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:

# 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