O guia definitivo de otimização de imagens para sites: tamanhos, formatos, LCP e SEO (com exemplos reais)
Aprenda a otimizar imagens usando WebP, Squoosh e ferramentas gratuitas como GitHub e Cloudflare.
Quando comecei meu site, eu só queria escrever
Abri primeiro no WordPress, tentei deixar bonito e rápido… e percebi que estava passando mais tempo configurando o site do que escrevendo.
Desisti. Alguns meses depois, resolvi abrir o Blogger. Cheguei trazendo muito preconceito com a plataforma, confesso. Queria apenas um lugar simples para publicar meus textos.
Mas veio a surpresa: o Blogger era rápido, especialmente no mobile.
Foi quando resolvi testar a velocidade com o PageSpeed Insights e descobri algo importante: o maior inimigo da velocidade não é a plataforma, nem o tema, nem o Google. São as imagens.
O relatório mostrava que minhas imagens representavam mais de 60% do tamanho total da página e estavam atrasando o carregamento em segundos críticos.
O mito da imagem perfeita
No início, eu subia imagens grandes e bonitas direto nos posts. No computador parecia ótimo. No celular? Travava, demorava para carregar e ainda não ocupava o espaço completo do conteúdo.
Foi aí que aprendi: uma imagem boa não é a grande, é a que carrega rápido.
A largura da imagem precisa combinar com a largura do seu conteúdo. Por exemplo: se sua área de post tem 630px, não faz sentido subir uma imagem de 2000px. O navegador terá que reduzir e isso desperdiça dados, atrasando o carregamento.
Depois de muitos testes, cheguei ao meu equilíbrio:
- Desktop: 637px
- Mobile: 364px
Utilizo duas versões da mesma imagem. Usando o atributo srcset no HTML, o navegador baixa automaticamente a versão certa para cada dispositivo.
Como funciona: No mobile, o navegador baixa a imagem de 364px do Cloudflare. No desktop, baixa a de 637px. Ambas mantêm a mesma proporção 7:4 e preenchem 100% da largura disponível, sem distorção.
Compressão e redimensionamento: o segredo do carregamento rápido
Independente da plataforma onde você cria suas imagens (IA, banco de imagens, celular, câmera), você sempre vai precisar redimensionar e comprimir antes de enviar para o blog/site.
🛠️ Squoosh - Ferramenta de Compressão
Para isso, uso o Squoosh, uma ferramenta gratuita do Google. Com ele você:
- reduz o tamanho do arquivo
- mantém a qualidade visual
- gera imagens em WebP, formato moderno e leve
No Squoosh você pode definir:
- largura máxima (ex.: 637px ou 364px)
- compressão sem perder nitidez
- WebP como formato padrão
Tamanho da imagem x tempo de carregamento
Veja um exemplo simples. Quanto maior o arquivo, mais tempo o leitor espera para carregar. Quando otimizamos, o site responde mais rápido.
Resultado: 80% menos dados transferidos e 50% menos tempo de carregamento.
Entrega rápida: GitHub + Cloudflare (gratuito)
Mesmo com imagens otimizadas, o tempo de carregamento depende de onde o arquivo está hospedado. Se ele estiver em um servidor lento ou distante, a página demora.
Uma solução simples e gratuita é usar:
- GitHub Pages — armazena suas imagens no repositório
- Cloudflare — entrega essas imagens do servidor mais próximo do visitante (CDN)
Na prática, funciona assim:
- Você cria uma pasta no GitHub e envia suas imagens otimizadas
- Configura o Cloudflare para apontar para seu repositório GitHub
- Quando alguém visita seu site, o Cloudflare entrega a imagem do servidor mais próximo da pessoa
Faça backup antes de testar
Antes de editar HTML, trocar tema ou instalar códigos, faça um backup do tema: Tema → Personalizar → Fazer backup (exemplo para o Blogger).
Se algo quebrar, você restaura em segundos. Economiza horas de dor de cabeça.
Por que o Facebook é tão rápido?
Você já se perguntou como o Facebook, com bilhões de imagens enviadas diariamente, consegue carregar tão rápido enquanto seu blog pequeno sofre com cada foto que você adiciona?
A resposta está na otimização inteligente que eles fazem:
- Redimensionamento automático - Cada imagem é convertida para múltiplos tamanhos
- Compressão agressiva - Reduzem o arquivo sem perder qualidade perceptível
- CDN global - Suas imagens são servidas do servidor mais próximo de você
- Carregamento progressivo - Mostram uma versão borrada primeiro, depois a nítida
- Formatos modernos - Usam WebP e outras tecnologias eficientes
A boa notícia? Você pode aplicar as mesmas técnicas no seu site, usando as ferramentas gratuitas que mostrei aqui. A diferença é que você fará manualmente o que o Facebook faz automaticamente.
Ou seja: velocidade não é mágica. É inteligência. E qualquer site pode fazer o mesmo hoje.
O segredo que ninguém te conta
Não existe número mágico para largura ou compressão. Cada site tem o seu próprio equilíbrio, baseado no design e no público.
Mas existe uma regra que nunca falha: respeitar o tempo do leitor. Entregar um site rápido, leve e agradável faz toda diferença.
