Como comprimir imagem para Core Web Vitals (LCP, peso, formato moderno)

Por que imagem afeta tanto Core Web Vitals

LCP (Largest Contentful Paint): tempo até o maior elemento visível ser renderizado. Em 90% das páginas, esse maior elemento é IMAGEM (hero banner, foto principal). Imagem grande = LCP ruim.

Limite Google para 'good': LCP ≤ 2.5s. Imagem hero de 2MB em 4G médio (~5 Mbps) leva ~3-4s só pra baixar.

Outras métricas afetadas: CLS (layout shift se imagem carrega sem dimensões definidas), TTI (imagens bloqueiam thread se síncronas), TBT (decoding de imagem grande bloqueia main thread).

Estratégia em 4 camadas

Otimização de imagem para web tem 4 técnicas que se combinam. Aplicadas juntas, reduzem peso de 70-90%:

1. Formato moderno (WebP / AVIF) — 25-50% menor que JPG na mesma qualidade visual
2. Compressão correta (qualidade 80-85% para JPG/WebP, 75% para AVIF)
3. Tamanho exato (não usar imagem 4K em slot 600px do design)
4. Responsive images (srcset + sizes — entrega tamanho adequado por viewport)

Formato: WebP é o padrão de 2026

JPG: padrão histórico, suporte universal. Compressão lossy boa mas datada — em 2026, vale só para compatibilidade legacy.

PNG: lossless, suporta transparência. Use APENAS para imagens com transparência ou pixel art. Para fotos, é desperdício de bytes.

WebP (recomendado): suporte universal desde 2020 (Safari adicionou). Compressão 25% melhor que JPG, suporta transparência (substitui PNG também). Use como default em 2026.

AVIF: estado da arte, compressão 50% melhor que JPG. Suporte: Chrome, Firefox, Safari 16+ (lançado 2022). Para máxima compat, use AVIF com fallback WebP/JPG via `<picture>` element.

Compressão correta: qual qualidade usar

Cada formato tem 'sweet spot' onde compressão é máxima e perda visual é imperceptível:

• JPG: qualidade 85% (default da maioria das ferramentas). Acima disso, ganho marginal; abaixo, artefatos visíveis.
• WebP: qualidade 80% (lossy). Para gráficos/screenshots, considere lossless (-30% bytes mas qualidade 100%).
• AVIF: qualidade 75% (escala diferente, mais agressivo). 50% qualidade já é visualmente OK.

Tamanho: nunca use imagem maior que slot do design

Erro #1 em performance: usar foto 4000×3000 num slot que renderiza 600×450. O navegador faz downscale, mas o byte foi baixado.

Solução: redimensione PARA o tamanho real de uso antes de fazer upload. Se seu hero é 1200×630 max, baixe a 1200×630 (mais 2x para retina = 2400×1260). Não 4000×3000.

Use o Image Resizer do Quorify para redimensionar uma imagem ou Bulk Image Resizer para processar todas as imagens do site de uma vez antes de upload.

Workflow completo para otimizar imagens existentes

Para um site existente com imagens não-otimizadas:

1. Identifique imagens grandes (use Lighthouse > Performance > 'Properly size images').
2. Liste tamanhos máximos reais de cada slot (inspect element + ler CSS).
3. Use Bulk Image Resizer para redimensionar TODAS para os tamanhos corretos.
4. Use Image Converter para converter JPG/PNG → WebP em lote.
5. Use Image Compressor para aplicar compressão final (qualidade 80%).
6. Substitua os arquivos no servidor / CDN.
7. Verifique no Lighthouse — LCP deve melhorar significativamente.

HTML correto para servir imagens otimizadas

Mesmo com imagem otimizada, HTML errado anula o ganho. Padrão correto:

```html <picture> <source srcset='hero.avif' type='image/avif'> <source srcset='hero.webp' type='image/webp'> <img src='hero.jpg' alt='Descrição' width='1200' height='630' loading='lazy' decoding='async'> </picture> ```

Pontos críticos:

• `<picture>` permite formato moderno com fallback automático
• `width` e `height` no `<img>` evita CLS
• `loading='lazy'` adia load de imagens fora do viewport (NÃO use no hero — pode atrasar LCP)
• `decoding='async'` permite decoder em paralelo, não bloqueia main thread
• `alt` é obrigatório para acessibilidade + SEO

Frameworks modernos: Next.js, Astro, etc

Next.js tem `<Image>` component que faz otimização automática (formato, sizing, lazy loading) — use sempre que possível.

Astro tem componente similar.

Para sites estáticos sem framework: faça otimização manualmente com ferramentas web (como Image Compressor do Quorify).

Conclusão

Otimização de imagem para Core Web Vitals é o ROI mais rápido em performance web — 1 hora de trabalho pode reduzir LCP em 50%+. O fluxo é simples: redimensione para tamanho real → converta para WebP/AVIF → comprima a 80% → use HTML correto com `<picture>` + dimensões. O Image Compressor do Quorify automatiza a compressão; combine com Image Converter para formato moderno e Bulk Image Resizer para batch. Para entender por que CLS importa e como evitar layout shift, leia Como criar slug SEO perfeito que cobre fundamentos relacionados.