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
- Confira as práticas recomendadas para exibir imagens responsivas.
- Confira a lista de verificação de otimização de imagens individuais.
Otimizações para imagens GIF, PNG e JPEG
Os formatos GIF, PNG e JPEG representam 96% do tráfego total de imagens na Internet (páginas em inglês). 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
convert cuppa.png -strip cuppa_converted.png
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
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
