Estratégia Definitiva de Compressão de Imagens 2025 – Guia prático para otimizar velocidade preservando a qualidade

Objetivo: internalizar rapidamente princípios práticos de um fluxo de compressão + entrega que estabiliza velocidade percebida (LCP/INP) preservando qualidade visual.

TL;DR

• Redimensione primeiro, depois ajuste a qualidade. Corrigir a largura real economiza 30–70%.
• Fotos: WebP / AVIF. UI / logos: PNG ou WebP sem perda. Sem transparência: JPEG/WebP/AVIF.
• Entrega responsiva + lazy loading. Imagem LCP: preload + alta prioridade.
• Evite cadeias de recompressão. Master único de alta qualidade.
• Automatize: presets em CI/Build, fingerprint + cache longo.

Princípio Básico

Custo = pixels × eficiência de codificação. Reduza pixels antes de otimizar formato/qualidade.

Prioridades

1. Largura/altura máximas reais
2. Seleção de formato
3. Qualidade / subsampling / espaço de cor

Escolha de Formato (Prática)

Fotos: WebP base, teste AVIF. UI/logos: PNG ou WebP lossless.

Checklist Operacional

• Evitar overserving (srcset/sizes)
• Preload + fetchpriority="high" para LCP
• Cache longo + nomes com hash
• Detectar artefatos cedo (banding, fringing, ICC)

Próximos Passos

1. Resize → 2) Formato → 3) Qualidade
2. Responsivo + lazy
3. Integração CI/Build

KPIs

Reduzir atraso LCP, não degradar INP, fidelidade de cor & marca, automação, custo de banda.

Estratégia de Tamanho

MaxPixels = min(container, viewport) × DPR

Fluxo de Decisão de Formato

Transparência? → PNG/WebP lossless Foto? → WebP/AVIF Compat x tamanho mínimo? → WebP / AVIF LCP? → Qualidade agressiva + preload

Transformação Mínima (sharp)

// scripts/build-images.ts

WebP q≈75–80, AVIF q≈50–60.

Next.js

Somente imagem LCP com priority.

CLI

cwebp input.jpg -q 78 -m 6 -mt -o out.webp
avifenc --min 28 --max 32 --speed 6 input.png out.avif
magick input.jpg -resize 1536x -quality 85 out-1536.jpg

Avaliação de Qualidade

Visual + SSIM/PSNR + ΔE.

CDN / Cache

Cache longo + fingerprint; on‑demand: stale-while-revalidate.

Armadilhas Comuns

Perfil ICC perdido, subsampling agressivo, recompressão JPEG, transparência PNG desnecessária.

FAQ

AVIF sempre melhor? Nem sempre; valide visualmente.

Resumo do Workflow

1. Largura máx → resize
2. Formato (WebP + AVIF)
3. Qualidade
4. Responsivo + prioridade LCP
5. Build + caching