Otimizar imagens

Esta regra é acionada quando o PageSpeed Insights detecta que as imagens na página podem ser otimizadas para reduzir o tamanho do arquivo sem afetar significativamente a qualidade visual.

Visão geral

Em geral, as imagens correspondem à maioria dos bytes transferidos por download em uma página. Como resultado, muitas vezes a otimização de imagens pode gerar algumas das maiores economias de bytes e melhorias de desempenho: quanto menos bytes o navegador tiver que transferir por download, menor será a disputa pela a largura de banda do cliente e mais rápido o navegador poderá fazer download e renderizar o conteúdo na tela.

Recomendações

Para encontrar o melhor formato e estratégia de otimização de recursos de imagem, é preciso analisar cuidadosamente diversos aspectos: o tipo dos dados codificados, as capacidades do formato da imagem, as configurações de qualidade, a resolução e muito mais. Além disso, é preciso considerar se algumas imagens têm uma exibição melhor em um formato vetorial, se os efeitos desejados podem ser obtidos com CSS e como exibir recursos de dimensões adequadas para cada tipo de dispositivo.

Otimizações para todos os tipos de imagens

Otimizações para imagens GIF, PNG e JPEG

Os formatos GIF, PNG e JPEG representam 96% do tráfego total de imagens na Internet. Devido a essa popularidade, o PageSpeed Insights oferece recomendações específicas de otimização para esses formatos. Para sua conveniência, é possível fazer download das imagens otimizadas diretamente do PageSpeed Insights (que está usando a biblioteca de otimização de imagens de modpagespeed.com).

Você também pode usar ferramentas como o binário de conversão feito pelo ImageMagick, que pode aplicar otimizações semelhantes. Veja as instruções de exemplo abaixo.

Ao usar ferramentas de terceiros, lembre-se de que a transformação pode aumentar as imagens se elas já estiverem otimizadas. Caso isso aconteça, use as originais.

GIF e PNG são formatos sem perdas, em que o processo de compactação não modifica visualmente as imagens. Para imagens estáticas, o formato PNG tem melhor taxa de compactação e melhor qualidade visual. Para imagens animadas, considere usar o elemento de video em vez de um GIF para ter uma compactação melhor.

  • Sempre converta o formato GIF para o formato PNG a menos que a imagem original seja animada ou pequena (com menos de algumas centenas de bytes).
  • Para os formatos GIF e PNG, remova o canal alfa se todos os pixels forem opacos.

Por exemplo, você pode usar o binário de conversão para otimizar suas imagens GIF e PNG com o seguinte comando (os parâmetros entre colchetes são opcionais):

convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png

cuppa.png
cuppa.png (1.763 Bytes)

convert cuppa.png -strip cuppa_converted.png

cuppa_converted.png
cuppa_converted.png (856 Bytes)

O formato JPEG apresenta perdas. O processo de compactação remove detalhes visuais da imagem, mas a taxa de compactação pode ser 10x maior do que ocorre nos formatos GIF ou PNG.

  • Reduza a qualidade para 85 se ela for maior. Com qualidade superior a 85, a imagem aumenta rapidamente, mas a melhoria visual é pequena.
  • Reduza o Chroma sampling para 4:2:0, porque o sistema visual humano é menos sensível às cores em comparação com a luminância.
  • Use o formato progressivo para imagens de mais de 10 mil bytes. O formato JPEG progressivo geralmente possui uma taxa de compactação maior que o formato JPEG de linha de base para imagens grandes, além dos benefícios da renderização progressiva.
  • Use um espaço de cores de escala de cinza se a imagem estiver em preto e branco.

Por exemplo, você pode usar o binário de conversão para otimizar suas imagens JPEG com o seguinte comando (os parâmetros entre colchetes são opcionais):

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg

puzzle.jpg
puzzle.jpg (13.501 Bytes)

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

puzzle_converted.jpg
puzzle_converted.jpg (4.599 Bytes)