Imagens: o que mais pesa no seu site e como resolver sem perder qualidade

Quando um site demora para abrir, o primeiro suspeito quase sempre é a imagem. Não porque foto seja um problema, mas porque uma foto do jeito que sai do celular é enorme, e o site a entrega inteira para quem só vai vê-la numa tela de dez centímetros. Este artigo explica as quatro decisões que resolvem isso, sem perder qualidade.

O tamanho certo para a tela

Uma foto de celular tem milhares de pixels de largura. Na tela onde ela vai aparecer, ocupa algumas centenas. Servir o arquivo original é fazer a pessoa baixar dez vezes mais do que ela consegue ver. O site certo guarda mais de uma versão de cada imagem e entrega a que cabe na tela que está pedindo: uma para o celular, outra para o computador. Foi assim que fizemos no nosso próprio site: a imagem principal tem uma versão menor para telas comuns e uma maior só para telas de alta densidade.

O formato

JPEG e PNG são os formatos antigos. WebP (e o mais novo AVIF) guardam a mesma imagem, com a mesma qualidade visível, num arquivo bem menor. Logos e ícones, quando existem em vetor (SVG), ficam nítidos em qualquer tamanho e pesam quase nada. A conversão é trabalho de quem faz o site; você não precisa se preocupar com isso ao enviar as fotos.

A ordem de carregamento

A imagem principal, aquela que aparece na primeira tela, precisa começar a baixar antes de tudo: ela é o LCP de que falamos no artigo sobre performance. As outras, que estão mais embaixo, só devem carregar quando a pessoa se aproxima delas. Isso se chama carregamento sob demanda. O erro comum é o inverso: aplicar o carregamento sob demanda também na imagem principal, o que a atrasa e derruba a nota que mais importa.

Reservar o espaço

Quando o site não sabe o tamanho da imagem antes de ela chegar, o conteúdo pula para dar lugar a ela. É o CLS do relatório do Lighthouse, e é o que faz a pessoa tocar no botão errado. A solução é simples: declarar largura e altura de cada imagem, para o espaço já ficar reservado enquanto ela carrega.

As fotos que vêm de você

Não precisa de estúdio. O que pedimos é o arquivo original, com boa luz e fundo limpo. Recortar, redimensionar, converter e organizar é parte do projeto. Uma foto ruim não vira boa com tratamento, mas uma foto boa de celular, tratada, funciona muito bem para uma loja de roupas ou uma landing page.

Como ver no seu site

No relatório do PageSpeed Insights, procure os itens sobre imagens com tamanho adequado, formatos modernos e imagens fora da tela. Se aparecerem como oportunidades, são exatamente as quatro decisões acima que estão faltando.