AVIF, WebP e JPEG são opções para fotografias; a escolha depende do equilíbrio entre bytes, qualidade, compatibilidade e recursos necessários. Faça a comparação com a imagem real: nenhuma extensão é sempre menor ou melhor.
Compare os formatos
| Formato | Quando é um bom candidato | Pontos para conferir |
|---|---|---|
| JPEG | Fotografia com compatibilidade ampla, inclusive navegadores e ferramentas mais antigos. | Não oferece transparência; ajuste qualidade e dimensões para evitar arquivos desnecessariamente grandes. |
| WebP | Fotografia e gráficos que precisam de transparência ou animação em navegadores modernos. | Tem modos com e sem perdas; compare cada imagem e mantenha alternativa para clientes fora do suporte definido pelo projeto. |
| AVIF | Fotografias em que a codificação AVIF reduz bytes sem perda visual inaceitável e a plataforma de entrega o suporta. | Pode exigir mais tempo de codificação; confira suporte do fluxo de publicação, transparência/animação necessárias e fallback. |
Para ícones, logotipos e ilustrações geométricas, avalie SVG; para transparência ou preservação sem perdas, PNG ou WebP sem perdas também podem ser apropriados. Texto que precisa ser lido deve ficar como texto HTML, não gravado dentro da imagem.
Faça um teste comparável
- Parta do mesmo original e produza versões nos três formatos com dimensões iguais às de exibição e a mesma política de compressão.
- Registre extensão, dimensões, bytes e configuração usada. Não compare um JPEG enorme com um AVIF redimensionado.
- Veja as amostras em tamanho real e com zoom: procure blocos, halos, perda de textura, mudanças de cor e bordas borradas.
- Repita com fotos diferentes — retrato, cena detalhada e imagem escura podem se comportar de formas distintas. Escolha a menor opção que ainda atende à qualidade e aos requisitos do site.
- Verifique em dispositivos/navegadores do público e meça o recurso realmente transferido. Otimize também dimensões,
srcset/sizes, cache e prioridade da imagem LCP.
Sirva uma alternativa
Com HTML, <picture> permite oferecer formatos modernos e manter um arquivo JPEG como fallback para um <img> compatível:
<picture>
<source srcset="/fotos/produto.avif" type="image/avif">
<source srcset="/fotos/produto.webp" type="image/webp">
<img src="/fotos/produto.jpg" width="1200" height="800"
alt="Produto visto de frente">
</picture>O navegador escolhe a primeira fonte que consegue exibir; confirme as respostas HTTP e a alternativa em um navegador sem suporte simulado ou com ferramenta de teste adequada. A mesma política precisa estar configurada no CDN ou gerador de imagens, caso a seleção aconteça no servidor.
Limites e cuidados
Não substitua em massa sem preservar os originais e sem validar imagens de conteúdo, produto e fundo. Compressão com perdas altera informação visual; gráficos com texto pequeno podem precisar de outra solução. WebP e AVIF costumam comprimir melhor em muitos casos, mas só o teste representativo confirma o resultado para seu acervo.
Fontes: Escolher o formato de imagem — web.dev e Desempenho de imagens — web.dev. Consulte também desempenho.