Otimização de Imagens para Velocidade do Site: Guia Completo

As imagens representam quase metade do peso total de uma página web comum. Imagens mal otimizadas são uma das causas mais frequentes de sites lentos.

---

Por Que a Otimização de Imagens é Importante

Impacto na Experiência do Usuário

• 53% dos usuários móveis abandonam sites que demoram mais de 3 segundos para carregar (Google)
• Um atraso de 1 segundo pode reduzir as conversões em 7% (Akamai)
• 47% dos consumidores esperam que as páginas carreguem em 2 segundos ou menos

Impacto no SEO

Os Core Web Vitals — LCP, CLS e INP — fazem parte do algoritmo de ranking do Google. Imagens grandes e não otimizadas afetam diretamente o LCP e o CLS.

Impacto nos Custos

Imagens sem otimização aumentam os custos de banda, CDN e armazenamento.

---

Passo 1: Escolha o Formato Certo

JPEG / JPG

• Compressão com perdas, ideal para fotografias
• Suporte universal em todos os navegadores

PNG

• Compressão sem perdas, ideal para capturas de tela, logotipos e transparência
• Suporte universal em todos os navegadores

WebP

• Com e sem perdas, ideal para praticamente todas as imagens web
• 25 a 35% mais leve que JPEG e 26% mais leve que PNG
• Compatível com todos os navegadores modernos

AVIF

• Formato de nova geração, ainda melhor que o WebP
• Use com fallback para WebP/JPEG

SVG

• Formato vetorial, perfeito para ícones e logotipos

---

Passo 2: Comprima suas Imagens

Use o TinyImg — todo o processamento acontece no seu navegador e as imagens ficam privadas.

---

Passo 3: Sirva Imagens Responsivas

<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Texto alternativo descritivo"
  width="800"
  height="600"
/>

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Texto alternativo descritivo" width="800" height="600" />
</picture>

---

Passo 4: Implemente Lazy Loading

<img src="image.webp" alt="Descrição" loading="lazy" width="800" height="600" />

NÃO aplique lazy loading em imagens que estão visíveis logo ao carregar a página. Sempre inclua width e height para evitar o CLS.

---

Passo 5: Defina as Dimensões Corretas das Imagens

<!-- Correto -->
<img src="photo.webp" alt="Foto" width="800" height="600" />

<!-- Errado: causa mudança de layout -->
<img src="photo.webp" alt="Foto" />

img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

---

Passo 6: Use um CDN

• Cloudflare — plano gratuito com otimização de imagens
• Cloudinary — transformação de imagens e CDN
• imgix — processamento e entrega em tempo real
• Vercel — otimização integrada para Next.js

---

Passo 7: Audite e Meça

Ferramentas: PageSpeed Insights, Lighthouse, WebPageTest, Chrome DevTools.

---

Checklist Rápido de Otimização

• Escolher o formato certo (WebP para fotos, PNG para transparência, SVG para ícones)
• Comprimir todas as imagens (TinyImg)
• Servir imagens responsivas com srcset e sizes
• Aplicar lazy loading nas imagens abaixo da dobra
• Definir width e height em todos os elementos <img>
• Usar um CDN
• Auditar com PageSpeed Insights

---

Conclusão

Comece comprimindo suas imagens com o TinyImg — gratuito, rápido e tudo processado localmente. Seus usuários (e o Google) vão agradecer.