AVIF para Desenvolvedores

Guia AVIF para Desenvolvedores

Guia completo para implementar AVIF em seus projetos web.

Implementação HTML

Use o elemento picture para suporte progressivo:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.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