Otimização de imagens

A Silktide baixa as imagens das suas páginas e testa se elas poderiam ficar significativamente menores sem alterar sua aparência. As imagens que poderiam ser reduzidas são relatadas junto com a possível economia, para que você possa priorizar os maiores ganhos.

Por que isso é importante

As imagens geralmente representam a maior parte do peso de uma página da Web, portanto costumam ser a maior oportunidade individual de melhorar o desempenho. Imagens grandes fazem com que as páginas demorem mais para aparecer, o que aumenta mensuravelmente o abandono — especialmente em conexões móveis — e consome mais dados e bateria dos seus visitantes. A velocidade da página também influencia a classificação nas pesquisas por meio das .

Ao contrário da maioria dos trabalhos de desempenho, a otimização de imagens raramente envolve concessões: uma imagem devidamente compactada tem a mesma aparência e funciona da mesma forma. É uma melhoria de desempenho quase gratuita.

Como corrigir

Comprima as imagens relatadas. Quase toda ferramenta de imagens pode fazer isso na exportação; fotografias geralmente devem ser JPEG com qualidade em torno de 85%, o que reduz bastante o tamanho do arquivo com perda visual mínima.
Use o formato adequado: JPEG (ou WebP/AVIF) para fotografias; PNG ou SVG para logos, ícones e outros elementos gráficos com cores uniformes. Formatos modernos como WebP e AVIF são melhores que ambos quando sua plataforma oferece suporte a eles.
Automatize o processo. A maioria dos , pipelines de compilação e pode compactar e converter imagens durante o upload ou a entrega — corrigir o pipeline impede que o problema volte a ocorrer.
Entregue as imagens no tamanho em que são exibidas, usando imagens responsivas (srcset) em vez de enviar uma única imagem enorme para todos os dispositivos:

<img src="hero-800.jpg"
     srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     alt="Vinhedo ao pôr do sol">

Como a Silktide testa isso

Coleta as imagens que cada página realmente carrega.
Compacta novamente cada imagem com técnicas adequadas ao seu formato: JPEG progressivo com qualidade de 85%, recompressão de PNG com e sem perda, de SVG e reotimização de GIF.
Compara o melhor resultado com o original. Uma imagem só é relatada quando a economia é significativa: mais de 20% menor e com mais de 40 KB economizados.
Relata a possível redução para cada imagem, para que as maiores economias se destaquem.

Solução de problemas

A imagem já parece compactada

A economia relatada é medida, não estimada — a Silktide realmente produziu um arquivo menor. Motivos comuns para uma imagem aparentemente otimizada ainda perder 20% incluem metadados incorporados, codificação JPEG não progressiva e arquivos PNG usados para fotografias.

Usamos uma CDN que otimiza imagens

A Silktide testa o que a página realmente entregou. Portanto, se uma imagem relatada passou pela sua CDN, essa otimização não foi aplicada ou não foi suficiente. Verifique as configurações da CDN para os caminhos ou formatos afetados.

A economia parece pequena

Imagens que estejam dentro de 20% ou 40 KB do ideal não são relatadas. Se uma economia relatada parecer pequena, lembre-se de que ela se aplica a cada visualização da página por cada visitante.