AVIF para Desenvolvedores

Guia de implementação

Guia AVIF para Desenvolvedores

Guia completo para implementar AVIF em seus projetos web.

Implementação HTML

Para imagens responsivas, combine srcset com o elemento picture (o fallback de navegador básico está no guia de compatibilidade):

<picture>
  <source
    srcset="foto-400.avif 400w, foto-800.avif 800w, foto-1200.avif 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
    type="image/avif">
  <img src="foto-800.jpg" alt="Descrição" loading="lazy">
</picture>

Implementação CSS

Use @supports para imagens de fundo:

.hero {
  background-image: url('hero.jpg');
}
@supports (background-image: url('test.avif')) {
  .hero {
    background-image: url('hero.avif');
  }
}

Ferramentas de Build

Sharp: Biblioteca Node.js para conversão de imagens
Squoosh CLI: Ferramenta CLI do Google para otimização
ImageMagick: Ferramenta CLI versátil com suporte AVIF

Dicas de Performance

Sempre use lazy loading para imagens abaixo da dobra
Implemente imagens responsivas com srcset
Considere qualidade 60-80 para a maioria dos casos
Teste em vários dispositivos e conexões