Como preparar imagens para uma web rápida

Quando uma página web carrega devagar, a reação habitual é suspeitar do alojamento, do código ou de algum plugin pesado — e por vezes o problema está mesmo aí. Mas, na grande maioria dos casos reais, o principal responsável são as imagens: umas poucas fotos não otimizadas podem pesar mais do que todo o resto da página em conjunto. Antes de mudar de servidor ou mexer no código, vale a pena rever esta checklist.

Por que razão as imagens são quase sempre o gargalo

O HTML, o CSS e o JavaScript de uma página normal pesam, no conjunto, apenas algumas centenas de kilobytes na maioria dos sites. As imagens, pelo contrário, ultrapassam facilmente vários megabytes se não forem otimizadas — uma única foto de destaque sem compressão pode pesar mais do que todo o resto da página. É por isso que otimizar imagens costuma dar a maior melhoria de velocidade pelo menor esforço, comparado com otimizações de código que exigem muito mais trabalho para uma poupança menor.

A checklist, por ordem de impacto

1) Formato correto. WebP ou AVIF em vez de JPG ou PNG por predefinição — com qualidade visual equivalente, costumam pesar bastante menos. Cobrimos isto em detalhe noguia de formatos.

2) Tamanho em pixels ajustado ao espaço real. Se a imagem é mostrada com 800 pixels de largura, não faz sentido servir um ficheiro de 4000 pixels — o navegador tem de descarregar e processar todo esse excesso de dados só para o reduzir visualmente depois.

3) Compressão no ponto certo. Nem sem comprimir (peso desnecessário) nem sobrecomprimida (artefactos visíveis) — o intervalo de qualidade que dá o melhor equilíbrio, que tratamos no artigo sobre como reduzir o peso de um JPG sem perder qualidade.

4) Carregamento diferido (lazy loading). O atributo nativo loading="lazy"do próprio HTML evita que o navegador carregue imagens que o utilizador nunca chega a ver — sem necessidade de nenhuma biblioteca externa, bastando acrescentar esse atributo às imagens que ficam fora do ecrã inicial.

5) Dimensões declaradas no HTML. Indicar width e height na etiqueta da imagem permite ao navegador reservar o espaço exato antes de a imagem terminar de carregar, evitando que o resto do conteúdo "salte" — um fator que o Google mede especificamente como CLS (Cumulative Layout Shift), outra das métricas dos Core Web Vitals.

Como aplicar tudo isto de uma vez

Os pontos 1, 2 e 3 resolvem-se num único passo como compressor da SMALLIMG: carregas o lote de imagens do teu site, escolhes o formato de saída, a largura máxima e a qualidade, e descarregas tudo pronto a publicar. Os pontos 4 e 5 são alterações feitas diretamente no HTML ou no template do teu site — a maioria dos gestores de conteúdos modernos (WordPress incluído, desde a versão 5.5) já ativam o carregamento diferido por predefinição, por isso por vezes só é preciso confirmar que não está desativado.