Performance

Imagens lentas a travar o site: formatos, compressão e lazy loading

Imagens lentas a travar o site: formatos, compressão e lazy loading

Se há um culpado universal para sites lentos, são as imagens. Não os scripts misteriosos, não o código complicado — as imagens. Uma fotografia tirada com o telemóvel e carregada diretamente no site pode ter 6, 8, 10 megabytes. Multiplica isso por meia dúzia de fotos numa página e tens um site que se arrasta, sobretudo no telemóvel de quem está na rua com uma ligação fraca.

A boa notícia: é o problema de performance mais fácil de resolver. Com três cuidados — formato, compressão e carregamento — transformas o ficheiro mais pesado da página no mais leve.

Porque é que as imagens pesam tanto

Uma imagem na web é, no fundo, um ficheiro que o navegador tem de descarregar antes de a mostrar. Quanto maior o ficheiro, mais tempo demora. E demora ainda mais em telemóvel, onde a ligação é mais lenta e instável.

O erro mais comum é carregar a imagem no tamanho original — uma foto de 4000 pixels de largura — quando no ecrã ela aparece com 800 pixels. O navegador descarrega os 4000 e depois encolhe-a. Estás a obrigar o visitante a baixar cinco vezes mais dados do que precisa.

As imagens são também, muitas vezes, o "maior elemento visível" de uma página — ou seja, são elas que ditam o LCP, uma das métricas que o Google mede. Uma imagem de capa lenta arrasta a pontuação inteira do site.

1. Escolher o formato certo

Nem todos os formatos de imagem são iguais. A escolha certa pode cortar o peso para metade ou menos:

  • WebP — o formato moderno mais usado hoje. Mantém qualidade visual com ficheiros muito mais leves do que JPEG ou PNG. É suportado por todos os navegadores atuais.
  • AVIF — ainda mais eficiente que o WebP, com ficheiros ainda menores. O suporte já é amplo, mas vale ter um WebP ou JPEG como alternativa.
  • JPEG — continua a ser válido para fotografias quando precisas de compatibilidade máxima, mas é menos eficiente que o WebP.
  • PNG — reserva-o para imagens com transparência ou gráficos com linhas nítidas (logótipos, ícones). Para fotografias, é desperdício de peso.
  • SVG — para logótipos e ícones simples. É vetorial, ou seja, fica nítido em qualquer tamanho e pesa quase nada.

O Google explica bem esta escolha no guia de formatos do web.dev. A regra prática: para fotos, WebP (ou AVIF); para gráficos e logótipos, SVG ou PNG.

2. Comprimir sem dar nas vistas

Comprimir uma imagem é reduzir o seu peso descartando informação que o olho humano não nota. Feito com cuidado, ninguém percebe a diferença — mas o ficheiro fica muito mais leve.

  • Redimensiona antes de comprimir. Se a imagem vai aparecer com 1200 pixels de largura, não a carregues com 4000. Ajusta o tamanho real primeiro.
  • Usa compressão com perdas moderada. Para fotografias, uma qualidade de 70-80% costuma ser indistinguível do original a olho nu, com uma fração do peso.
  • Serve tamanhos diferentes para ecrãs diferentes. Um telemóvel não precisa da mesma resolução que um monitor grande. As imagens responsivas entregam a cada dispositivo a versão certa.

Ferramentas como o Squoosh (do Google) permitem-te ver, lado a lado, o original e a versão comprimida antes de decidir. Numa página feita com cuidado, isto é automatizado — o site gera as versões otimizadas sozinho.

3. Lazy loading: carregar só o que se vê

Esta é a técnica mais elegante de todas. O lazy loading (carregamento preguiçoso) faz com que as imagens só sejam descarregadas quando estão prestes a entrar no ecrã, à medida que a pessoa rola a página.

Pensa numa página longa com vinte imagens. Sem lazy loading, o navegador tenta descarregar as vinte de uma vez, mesmo as que estão lá no fundo e talvez nunca sejam vistas. Com lazy loading, carrega só as primeiras — as visíveis — e vai buscando as outras à medida que precisas. O resultado é uma página que abre muito mais depressa.

O web.dev explica a técnica em detalhe. Hoje, os navegadores suportam-na nativamente com um simples atributo (loading="lazy"), mas há uma exceção importante: a imagem de capa, a que aparece primeiro, não deve ter lazy loading. Essa queres carregada o mais depressa possível, porque é ela que define o teu LCP.

O efeito conjunto

Aplicar as três técnicas em conjunto costuma ser transformador. Uma página que pesava vários megabytes passa a poucas centenas de kilobytes. O resultado vê-se no PageSpeed Insights, mas sobretudo sente-se: o site abre quase instantaneamente, mesmo em telemóvel.

E não é um trabalho que se faz uma vez e está feito. Sempre que alguém carrega uma imagem nova no site — um produto novo, uma foto de equipa — o cuidado tem de se manter. Um site bem construído trata disto automaticamente; um site descuidado vai engordando a cada publicação até voltar a arrastar-se.

No sitesfixe.pt construímos sites onde a otimização de imagens é automática — formatos modernos, compressão e carregamento inteligente desde a base. Websites desde 1.500€, com performance que aguenta o crescimento. Pede um orçamento sem compromisso.

Lê também:

Fontes

Precisas de um site ou loja online?

Estúdio digital português. Sites e lojas online rápidos, otimizados para o Google e feitos para resultado.

Pedir orçamento