AVIF, WebP e srcset: o guia rápido para imagens leves e nítidas

Em boa parte dos sites, imagens representam mais da metade dos bytes baixados. E a maioria é servida no formato errado, no tamanho errado e com a prioridade errada. Corrigir isso é uma das formas mais rápidas de acelerar um site.

Formatos

• AVIF: o mais eficiente hoje, arquivos bem menores que JPEG com a mesma qualidade.
• WebP: suporte universal e ótima compressão; bom fallback.
• JPEG/PNG: só como último recurso. PNG apenas para gráficos que precisam de transparência e poucas cores.
• SVG: para logos e ícones, sempre que possível.

<picture>
  <source srcset="/foto.avif" type="image/avif" />
  <source srcset="/foto.webp" type="image/webp" />
  <img src="/foto.jpg" width="1200" height="800" alt="Descrição real" loading="lazy" />
</picture>

O tamanho certo para cada tela

Um celular não precisa da imagem de 2.400px do monitor. Com srcset e sizes, o navegador escolhe a versão adequada:

<img srcset="/foto-480.avif 480w, /foto-960.avif 960w, /foto-1600.avif 1600w"
     sizes="(max-width: 768px) 100vw, 50vw" src="/foto-960.avif" alt="..." />

Três regras que evitam problemas

1. 1.Sempre `width` e `height` para não causar CLS (CLS: por que o seu site "pula" enquanto carrega e como parar com isso).
2. 2.Lazy loading abaixo da dobra; prioridade alta no topo (LCP alto por causa da imagem principal? 6 ajustes que resolvem na maioria dos sites).
3. 3.Texto alternativo descritivo: acessibilidade e SEO de imagens.

Automatize

Gerar várias versões à mão não escala. Serviços de imagem e o próprio build do site podem gerar formatos e tamanhos automaticamente, servidos por CDN (Cache HTTP e CDN: o site rápido que você já paga e não usa).

Portais como os de concessionárias dependem disso. Veja Performance WPO ou fale com a gente.