Como otimizar as imagens do seu site
Guia atualizado em 31 de julho de 2026 · leitura de 7 min
Imagens costumam representar a maior parte do peso de uma página. Otimizá-las é, quase sempre, a mudança com melhor relação entre esforço e resultado que existe em um site: sem mexer no layout nem reescrever código, a página passa a carregar visivelmente mais rápido — e velocidade influencia tanto a permanência do visitante quanto o ranqueamento no Google.
1. Sirva a imagem no tamanho em que ela aparece
Este é o erro mais caro e mais comum. Uma foto de 4000 pixels de largura exibida em uma coluna de 800 pixels obriga o visitante a baixar cinco vezes mais dados do que ele vai ver. O navegador reduz a imagem na hora de exibir, mas o download já aconteceu.
Descubra a largura real do espaço no seu layout e exporte a imagem com no máximo o dobro desse valor — o dobro cobre telas de alta densidade, que exibem dois pixels físicos para cada pixel do layout. Para uma coluna de 800 px, exportar em 1600 px é suficiente.
2. Escolha o formato certo para cada tipo de imagem
- Fotografias: WEBP é a primeira escolha; JPG como alternativa universal.
- Logotipos e ícones: SVG sempre que existir a versão vetorial — arquivo minúsculo e nítido em qualquer tela.
- Imagens com transparência: PNG ou WEBP.
- Capturas de tela com texto: PNG, para manter as letras nítidas.
Trocar as fotos de um site de JPG para WEBP costuma cortar de 25% a 35% do peso sem diferença visível.
3. Ajuste a compressão com critério
Qualidade 100% é quase sempre desperdício. Entre 75% e 85% você encontra o ponto em que o arquivo cai bastante e o olho não percebe. Vale conferir imagem por imagem nas mais importantes do site (banner principal, foto de destaque) e aplicar o mesmo padrão às demais.
4. Não empilhe conversões
Cada passagem por um formato com perdas degrada um pouco a imagem. Se você recebeu um JPG já comprimido, convertê-lo para WEBP com qualidade baixa vai somar os dois estragos. Sempre que possível, parta do arquivo original — de preferência PNG ou TIFF vindo do fotógrafo ou do designer — e gere a versão final de uma vez só.
5. Padronize antes de subir
Sites bem cuidados costumam ter regras simples e repetidas: fotos de produto sempre em 1200 px, quadradas, WEBP a 80%; imagens de blog sempre em 1600 px de largura. Definir esse padrão e aplicá-lo em lote evita que uma imagem esquecida de 8 MB entre no ar e derrube o desempenho de uma página inteira. Você pode fazer isso convertendo várias imagens de uma vez.
6. Cuide também do que não é peso
Duas práticas melhoram a experiência sem relação direta com o tamanho do arquivo:
- Texto alternativo: descreva a imagem no atributo
alt. Isso ajuda quem usa leitor de tela e dá contexto para os buscadores. - Reserve o espaço da imagem: informe largura e altura no HTML para que a página não "pule" enquanto as imagens carregam.
Um fluxo simples que funciona
Redimensionar para a largura do layout, converter para WEBP a 80% e conferir o resultado. Só isso já costuma reduzir o peso das imagens de um site em mais de 70%. E como o FileShits processa tudo no navegador, você pode preparar o lote inteiro sem enviar nada para servidores nem depender da velocidade da sua conexão.