Codificar as imagens com eficiência

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:

Captura de tela da auditoria de codificação de imagens de maneira eficiente do Lighthouse

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:

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.

Recursos