Formato de Imagem AVIF: 30% Menor que WebP

AVIF: O Novo Rei da Compressão de Imagens

AVIF (AV1 Image File Format) baseado na tecnologia de codificação de vídeo AV1, é o próximo formato de imagem após o WebP.

Formato	Codec	Tamanho na mesma qualidade	Suporte de navegador
JPEG	libjpeg	Referência	Todos
WebP	VP8	-25~35%	97%+
AVIF	AV1	-50~60%	92%+
PNG	deflate	3-5x JPEG	Todos

Dado chave: Na mesma qualidade SSIM, AVIF é 20-30% menor que WebP e 50-60% menor que JPEG.

---

Por que AVIF é tão pequeno?

Vantagens da codificação AV1

1. Predição intra-frame: Aproveita a redundância espacial dentro da imagem
2. Codificação por transformada: Suporta blocos de transformada de 4×4 a 64×64
3. Matriz de quantização: Quantização mais fina no domínio de frequência
4. Síntese de Film Grain: Separa o grão de filme, descrito com parâmetros em vez de armazenar pixels

Com perdas vs Sem perdas

Modo	Comparação de tamanho	Cenário de uso
Com perdas (CQ 30)	40% do JPEG	Fotos, capturas de tela
Com perdas (CQ 50)	25% do JPEG	Miniaturas, pré-visualizações
Sem perdas	50-60% do PNG	Ícones, recursos de UI
Com perdas + Alpha	30% do PNG	Fotos com transparência

---

Compatibilidade com Navegadores (2026)

Navegador	Suporte AVIF	Versão
Chrome	✅	85+
Firefox	✅	93+
Safari	✅	16+
Edge	✅	85+
Samsung Internet	✅	15+
IE	❌	Não suportado

Cobertura 92%+, pode ser usado com confiança em produção.

Estratégia de Fallback

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Foto" loading="lazy">
</picture>

O navegador seleciona o primeiro formato suportado em ordem.

---

Usar ToolsKu para Converter para AVIF

Passos de Operação

1. Abrir Ferramenta de Conversão de Formato de Imagem
2. Enviar imagem (suporta JPG, PNG, WebP, GIF)
3. Selecionar formato de saída AVIF
4. Ajustar parâmetros de qualidade:
   • Alta qualidade (CQ 20-30): Quase sem perdas, tamanho reduzido 40-50%
   • Equilibrado (CQ 35-50): Adequado para a maioria dos cenários, tamanho reduzido 50-60%
   • Alta compressão (CQ 55-70): Miniaturas/pré-visualizações, tamanho reduzido 60-80%
5. Baixar o resultado da conversão

Referência de Efeito de Conversão

Imagem original	Tamanho original	AVIF (CQ 35)	Taxa de compressão	SSIM
Foto de paisagem (4K)	8.2MB	1.1MB	87%	0.95
Foto de retrato	3.5MB	0.5MB	86%	0.94
Captura de UI	1.2MB	0.15MB	88%	0.97
Ícone (PNG+Alpha)	45KB	12KB	73%	1.00

---

Capacidades Especiais do AVIF

Canal Alpha (Transparência)

AVIF suporta com perdas + canal Alpha, algo que JPEG não possui:

PNG (transparente) 45KB → AVIF (transparente, CQ 35) 12KB → tamanho reduzido 73%

HDR / Amplo Gamut de Cores

AVIF suporta as duas funções de transferência HDR PQ e HLG, além do amplo gamut BT.2020:

Característica	JPEG	WebP	AVIF
Profundidade de cor	8-bit	8-bit	8/10/12-bit
Gamut de cores	sRGB	sRGB	sRGB / BT.2020
HDR	❌	❌	✅ PQ/HLG
Alpha	❌	✅	✅

Animação

AVIF suporta sequências de animação (AVIS), similar ao WebP animado:

GIF animado 2.5MB → WebP animado 0.8MB → AVIF animado 0.5MB

---

Conversão por Linha de Comando

Usar libavif (avifenc)

# Instalação
# macOS: brew install libavif
# Ubuntu: apt install libavif-bin

# Conversão básica
avifenc input.jpg output.avif

# Especificar qualidade (0-63, menor = maior qualidade)
avifenc -q 30 input.jpg output.avif

# Compressão sem perdas
avifenc --lossless input.png output.avif

# Especificar velocidade (0-10, mais lento = melhor compressão)
avifenc -q 35 -s 6 input.jpg output.avif

Usar ImageMagick

# Converter para AVIF
magick input.jpg -quality 65 output.avif

# Conversão em lote
magick mogrify -format avif -quality 65 *.jpg

---

Conversão Automática com Nginx

# Converter dinamicamente JPEG para AVIF
map $http_accept $avif_suffix {
  "~*image/avif" ".avif";
}

server {
  location ~* ^/.+\.(png|jpg|jpeg)$ {
    add_header Vary Accept;
    try_files $uri$avif_suffix $uri =404;
  }
}

Quando o cliente suporta AVIF, retorna automaticamente a versão .avif (requer pré-geração).

---

Melhores Práticas

1. Usar fallback <picture>: Fallback de três níveis AVIF → WebP → JPEG
2. Parâmetro de qualidade 35-50: Ponto de equilíbrio ideal para a maioria dos cenários
3. Pré-gerar em vez de converter dinamicamente: Gerar no momento da build, evitar custo de CPU no servidor
4. Fotos com AVIF, ícones com SVG: Imagens vetoriais não são adequadas para AVIF
5. Imagens com Alpha usar AVIF: Substituir PNG, reduzir tamanho 70%+
6. Configurar CDN para conversão automática: Cloudflare Image Resizing / CloudFront suportam retornar AVIF automaticamente pelo cabeçalho Accept