Imagens pesadas: o erro mais comum em sites lentos

Entre as causas de site lento, uma aparece com mais frequência do que todas as outras: imagens publicadas sem tratamento. A foto sai do celular ou da câmera do fotógrafo e vai direto para a página, do jeito que veio. Na tela, ela parece normal. O problema não está no que você vê, e sim no tamanho do arquivo que cada visitante precisa baixar.

Há uma boa notícia nesse diagnóstico. Ao contrário de problemas de servidor ou de estrutura, imagem pesada tem correção acessível, sem refazer o site e sem decisões técnicas complexas. Este artigo explica por que a foto sem tratamento pesa tanto, o que são os formatos modernos, como dimensionar, para que serve o lazy loading e quando a imagem simplesmente não deveria estar na página.

Como uma foto vira o maior peso da página

A câmera de um celular atual produz fotos com dimensões muito maiores do que qualquer área em que elas serão exibidas no site. O arquivo chega à casa dos megabytes, enquanto o restante da página, texto e estrutura, costuma pesar uma fração disso. Publicada sem redução, uma única foto pode custar mais transferência do que todo o resto somado.

O visitante paga esse custo em tempo de espera, principalmente em rede móvel. E o Google registra o efeito: quando a imagem é o elemento principal da tela, ela define o LCP, a métrica de carregamento das Core Web Vitals, cujo limiar público de bom desempenho é de até 2,5 segundos.

Formatos modernos em linguagem simples

Formato é o modo como o arquivo guarda a informação visual. JPEG e PNG são os formatos antigos e universais. WebP e AVIF são os modernos: entregam a mesma qualidade visual em arquivos menores, e os navegadores atuais os exibem sem dificuldade. O WordPress aceita o envio de WebP normalmente.

Uma regra prática cobre o dia a dia.

• Fotografias: WebP ou AVIF.
• Logotipos e ícones: SVG, formato vetorial que não perde definição em nenhum tamanho.
• Na dúvida ou em sistema antigo: JPEG bem comprimido ainda é aceitável.

Você não precisa decorar nada disso. As ferramentas de conversão citadas adiante fazem a escolha tecnicamente correta por você.

Dimensionar para o tamanho exibido

Além do formato, importa a dimensão. Enviar uma foto com milhares de pixels de largura para ocupar uma coluna estreita é como imprimir um outdoor para pendurar na sala. O navegador baixa o arquivo inteiro e depois o encolhe, desperdiçando a transferência.

A prática correta é exportar a imagem já próxima do tamanho em que será exibida, com alguma folga para telas de alta densidade. O WordPress gera versões em tamanhos alternativos a cada envio, o que ajuda, mas não corrige um original desnecessariamente grande. Reduzir antes de enviar continua sendo o caminho seguro.

Carregar só o que aparece: lazy loading

Lazy loading, ou carregamento adiado, é a técnica de baixar uma imagem apenas quando o visitante rola a página até perto dela. O que está fora da tela não consome a conexão de quem talvez nem chegue lá. Versões recentes do WordPress aplicam esse comportamento por padrão nas imagens do conteúdo.

Há uma exceção importante. A imagem principal do topo não deve ser adiada: ela é a primeira coisa que o visitante espera ver, e adiá-la piora o carregamento percebido. Adiar o que está abaixo da dobra, priorizar o que está acima. Essa é a regra.

Ferramentas gratuitas e uma rotina simples

Duas ferramentas gratuitas cobrem o essencial: o Squoosh, do próprio Google, que redimensiona, comprime e converte direto no navegador, e o TinyPNG, que comprime em lote. O PageSpeed Insights, por sua vez, aponta quais imagens de cada página merecem atenção primeiro, como mostra o artigo sobre como medir um site lento.

Antes de publicar qualquer imagem, repita a mesma sequência.

1. Redimensione para perto do tamanho de exibição.
2. Comprima e converta para um formato moderno.
3. Renomeie o arquivo com um nome descritivo.
4. Preencha o texto alternativo, que descreve a imagem para quem não a vê.
5. Publique e confira a página no celular.

Quando a imagem nem deveria existir

Parte do peso dos sites vem de imagens que não informam nada: fotos genéricas de banco de imagem, carrosséis que empilham várias imagens grandes no topo, texturas decorativas. Cada imagem deveria disputar o lugar na página pelo que comunica sobre o seu negócio.

O teste é simples: remova a imagem mentalmente. Se a página não perde informação nem força, ela era só peso. Poucas imagens boas, tratadas com cuidado, tendem a comunicar mais e custar menos do que muitas imagens medianas.

Perguntas frequentes

Minhas fotos vão perder qualidade se eu comprimir?

A compressão tem graus. Bem configurada, a diferença em tela tende a ser imperceptível para o visitante, enquanto a redução no tamanho do arquivo é expressiva. Guarde sempre os originais fora do site: o que vai para a página é a versão tratada, e o arquivo-fonte permanece intacto para outros usos.

Preciso tratar as imagens antigas ou só as novas?

Comece pelas páginas que mais recebem visitas e pelas imagens que o PageSpeed Insights aponta como pesadas. Corrigir a página inicial e as páginas de serviço já tende a mudar a experiência de quem chega. Depois, adote a rotina de tratamento para tudo o que for publicado dali em diante.

Meu fotógrafo entrega arquivos enormes. O que peço a ele?

Peça duas versões: o original em alta resolução, para arquivo e impressão, e uma exportação para web, já nas dimensões de exibição do site. Se receber apenas o original, trate você mesmo antes de enviar, com as ferramentas gratuitas citadas acima. O original nunca deve ir direto para a página.

A Azimute Comunicação trata imagem como etapa de método, não como detalhe final: todo site que entregamos sai com imagens dimensionadas, comprimidas e conferidas contra as métricas do Google. Conheça o método em três etapas e os contratos com escopo, prazo e preço publicados na página de serviços.