Na maioria dos sites lentos, o vilão é o mesmo: imagens grandes demais. Uma única foto exportada direto do celular pode pesar 5 ou 8 MB, o equivalente a uma página inteira bem feita. Multiplique por um banner, alguns produtos e um logo mal salvo, e o visitante fica olhando pra uma tela em branco. A boa notícia é que otimizar imagem é um dos ganhos mais rápidos que existem.

1. Redimensione antes de subir

O erro mais comum é subir uma imagem de 4000 pixels de largura pra exibir num espaço de 800. O navegador baixa a imagem gigante e encolhe na marra, desperdiçando tempo e dados. Regra prática: a imagem não precisa ser maior do que o espaço onde ela aparece. Redimensione pro tamanho real de exibição (com uma folga pra telas de alta resolução).

2. Use o formato certo

  • WebP (ou AVIF): formatos modernos que entregam a mesma qualidade com arquivos muito menores. É o padrão hoje, e o que a gente usa nos sites da Axolutions.
  • JPG: ainda serve pra fotos, mas pesa mais que o WebP.
  • PNG: só pra imagens com transparência ou logos simples. Foto em PNG vira um arquivo enorme sem motivo.
  • SVG: ideal pra logos e ícones, porque é vetor e não perde qualidade em nenhum tamanho.

3. Comprima sem medo

Dá pra reduzir o peso de uma imagem em 60 a 80% sem que o olho perceba diferença. Ferramentas gratuitas como Squoosh e TinyPNG fazem isso em segundos. Quem desenvolve costuma usar bibliotecas como o Sharp pra comprimir tudo automaticamente. O objetivo é chegar em fotos abaixo de 200 KB na maioria dos casos.

4. Carregue sob demanda (lazy loading)

Não faz sentido carregar de uma vez as vinte imagens de uma página se o visitante só vê as duas primeiras. O lazy loading deixa as imagens de baixo carregarem só quando a pessoa chega perto delas. Em HTML é tão simples quanto adicionar loading="lazy", e o ganho na primeira impressão é enorme.

5. Defina largura e altura

Quando a imagem não tem tamanho reservado, o layout "pula" na hora que ela carrega, piorando o seu CLS (um dos Core Web Vitals). Definir largura e altura, ou reservar o espaço por CSS, deixa a página estável enquanto carrega.

O impacto disso tudo

Só arrumando as imagens, muitos sites saem de 6 ou 7 segundos de carregamento pra menos de 2. E site rápido não é vaidade: é menos cliente perdido e melhor posicionamento no Google. Se o seu segue lento mesmo depois das imagens, o problema pode estar em outro lugar, veja por que meu site está lento e como resolver.

Deixa que a gente cuida

Nos sites que criamos com o Cosmos, a otimização de imagens já vem embutida: tudo entra em WebP, comprimido e com lazy loading, sem você pensar nisso. Quer um site leve de verdade? Fale com a Axolutions no WhatsApp.