A seção "Oportunidades" do relatório do Lighthouse lista todas as imagens não otimizadas, com potencial de economia em kibibytes (KiB). Otimize estas imagens para que a página carregue mais rapidamente e consuma menos dados:
Como o Lighthouse sinaliza imagens como otimizáveis
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 4KiB ou mais, o Lighthouse sinalizará a imagem como otimizável.
Como otimizar imagens
Há muitas etapas que você pode seguir para otimizar as imagens, incluindo:
- Como usar CDNs de imagem
- Como compactar imagens
- Substituir GIFs animados por vídeos
- Imagens com carregamento lento
- Como exibir imagens responsivas
- Como veicular imagens com as dimensões corretas
- Como usar imagens WebP
Otimizar imagens usando ferramentas de GUI
Outra abordagem é executar as imagens com 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, as compacta automaticamente sem comprometer visivelmente a qualidade. Se você estiver executando um site pequeno e conseguir otimizar manualmente todas as imagens, essa opção provavelmente é boa o suficiente.
Squoosh é outra opção. O Squoosh é mantido pela equipe do Google Web DevRel.
Orientações específicas para a pilha
Drupal
Considere usar um módulo que otimize e reduza automaticamente o tamanho das imagens enviadas pelo site, mantendo a qualidade. Além disso, use os Estilos de imagem responsiva integrados do Drupal (disponíveis no Drupal 8 e versões mais recentes) para todas as imagens renderizadas no site.
Joomla
Use um plug-in para otimização de imagens que as compacta sem afetar a qualidade.
Magento
Considere usar 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 mantendo a qualidade.