A seção "Oportunidades" do seu relatório do Lighthouse lista todas as imagens não otimizadas, com possíveis economias em kibibytes (KiB). Otimize essas imagens para que a página carregue mais rapidamente e consuma menos dados:
Como o Lighthouse sinaliza imagens como otimizadas
O Lighthouse coleta todas as imagens JPEG ou BMP na página, define o nível de compactação de cada imagem como 85 e compara a versão original com a compactada. Se a economia potencial for de 4 KiB ou mais, o Lighthouse sinalizará a imagem como otimizada.
Como otimizar imagens
Há muitas etapas que você pode seguir para otimizar suas imagens, incluindo:
- Como usar CDNs de imagem
- Compactar imagens
- Substituir GIFs animados por vídeo
- Imagens com carregamento lento
- Como veicular imagens responsivas
- Como exibir imagens com as dimensões corretas
- Como usar imagens WebP
Otimizar imagens usando ferramentas de GUI
Outra abordagem é executar as imagens em um otimizador instalado no computador e executado como uma GUI. Por exemplo, com o ImageOptim, você arrasta e solta imagens na IU e, em seguida, ele as compacta automaticamente sem comprometer a qualidade de modo perceptível. Se você estiver executando um site pequeno e conseguir otimizar manualmente todas as imagens, essa opção provavelmente é boa o suficiente.
O Squoosh é outra opção. O Squoosh é mantido pela equipe do Google Web DevRel.
Orientações específicas para a pilha
Drupal
Use um módulo que automaticamente otimiza e reduz o tamanho das imagens enviadas pelo site sem afetar a qualidade. Além disso, verifique se você está usando os estilos de imagens responsivas nativos fornecidos pelo Drupal para todas as imagens renderizadas no site.
Joomla
Use um plug-in para otimização de imagens que as compacta e mantém a qualidade.
Magento
Use uma extensão de terceiros do Magento que otimiza imagens.
WordPress
Use um plug-in do WordPress para otimização de imagens, que compacta as imagens sem afetar a qualidade.