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.