Em resumo

Entregue fotografias em WebP ou AVIF e mantenha JPEG como alternativa. Para gráficos com bordas nítidas e transparência, use PNG — ou, de preferência, SVG quando forem vetoriais. Em nossas medições, a mediana do AVIF com qualidade equivalente foi de 66 KB, contra 119 KB do JPEG. Porém, ele demora mais para codificar e precisa de fallback por meio da tag picture.

Perguntar se JPEG é melhor que PNG não faz sentido: são ferramentas para tarefas diferentes. O formato deve ser escolhido por quatro propriedades, e todas elas podem ser verificadas.

Em que os formatos são diferentes?

Em quatro pontos: se perdem dados durante a compressão, se aceitam transparência e animação e se são amplamente reconhecidos.

A compressão com perdas descarta parte das informações para reduzir o peso, e elas não podem ser recuperadas. É adequada para fotografias, nas quais o olho não percebe pequenas perdas nos meios-tons, mas inadequada para capturas de tela, onde cada letra tem uma borda definida.

A compressão sem perdas permite recuperar o arquivo byte por byte. É indispensável em gráficos com cores chapadas, mas deixa fotografias várias vezes mais pesadas.

Formato Compressão Alfa
JPEG apenas com perdas não
PNG apenas sem perdas sim
WebP ambas sim
AVIF ambas sim

Logotipos, ícones e objetos recortados precisam de transparência. A ausência desse recurso no JPEG não é um detalhe: será preciso colocar o objeto sobre um fundo uniforme e torcer para que o fundo da página não mude.

Quando JPEG ainda é a escolha certa?

Quando o arquivo precisa abrir em qualquer lugar: num cliente de e-mail antigo, num CRM de dez anos ou numa gráfica. Todos reconhecem JPEG, que continua sendo uma alternativa sensata dentro de picture.

Há dois pontos a lembrar. JPEG trabalha com oito bits e não tem canal alfa; por isso, gradientes podem apresentar faixas e não há transparência. Além disso, quase sempre usa subamostragem de cor 4:2:0, armazenando a cor com metade da resolução. Numa fotografia isso passa despercebido; em texto vermelho sobre fundo branco, fica muito visível.

Quando usar PNG?

Quando a imagem é formada por limites nítidos e preenchimentos uniformes: capturas de tela, interfaces, diagramas, logotipos e qualquer conteúdo com texto. PNG preserva tudo sem perdas e com transparência.

O PNG tem um modo subestimado: a paleta. Uma imagem com algumas dezenas de cores, salva com uma paleta de 64 cores, pesa várias vezes menos que a versão em cores completas e mantém a mesma aparência. Para ícones e diagramas simples, é a melhor solução quando não for possível usar vetor.

O que PNG não consegue fazer é comprimir bem uma fotografia. O mesmo quadro pesa uma ordem de grandeza mais que em JPEG: em nossos testes, um PNG de referência com 1200 pixels de largura ocupou 1–2 MB, enquanto o JPEG ficou entre 58–213 KB.

O que WebP oferece?

WebP é uma solução intermediária que todos os navegadores atuais reconhecem. Admite compressão com e sem perdas, transparência nos dois modos e animação.

Um detalhe importante para edição e impressão: o WebP com perdas usa oito bits e subamostragem 4:2:0; o modo sem perdas usa ARGB de 8 bits. O formato também tem um teto rígido de 16 383 pixels por lado. Para panoramas e telas destinadas a grandes formatos, é uma limitação real.

O que AVIF oferece e qual é o problema?

AVIF se baseia no codec de vídeo AV1 e comprime fotografias de forma muito mais eficiente. Aceita transparência, animação, ampla gama de cores e profundidade de até 12 bits. Seu limite é praticamente inalcançável: 2 147 483 647 pixels por lado, o mesmo do PNG.

Há dois problemas. O primeiro é o tempo: codificar AVIF demora várias vezes mais que JPEG, algo perceptível numa biblioteca grande. O segundo é a compatibilidade fora do navegador. Editores antigos, mensageiros e sistemas internos podem não abrir o arquivo. Por isso, a documentação da MDN sobre tipos de imagem recomenda servir AVIF em picture, com uma alternativa.

Formato Limite do lado, px Animação
JPEG 65 535 não
PNG 2 147 483 647 não
WebP 16 383 sim
AVIF 2 147 483 647 sim

Os limites vêm da mesma documentação da MDN. Raramente são relevantes, mas, quando aparecem, costumam surgir de forma inesperada.

Qual é a diferença de peso entre os formatos?

Depende do conteúdo: um céu uniforme pode ser comprimido três vezes melhor que folhagem. Portanto, dizer que “AVIF é 50% mais leve” sem indicar o quadro não significa muito. Faça o teste com seu material; este foi o nosso método.

Selecionamos oito fotografias do catálogo, ajustamos cada uma para 1200 pixels de largura e salvamos um PNG de referência. Para cada formato, buscamos a menor qualidade em que a diferença para a referência, pela métrica SSIM, não passasse de 0,02. Assim, comparamos qualidade equivalente medida, e não o mesmo número no campo “quality”.

Formato Mediana Variação
PNG sem perdas 1,4 MB 1,0–2,0 MB
JPEG 119 KB 58–213 KB
WebP 97 KB 33–194 KB
AVIF 66 KB 16–130 KB

A variação importa mais que a mediana. Nos oito quadros, AVIF foi em média 45% mais leve que JPEG, e WebP, 22%. Porém, os extremos variaram duas vezes: numa cena urbana noturna com ruído, AVIF economizou 39% em relação a JPEG; numa cena empresarial com fundo claro uniforme, 73%. Reproduza a medição com três comandos do ImageMagick:

magick photo.jpg -resize 1200x -strip ref.png
magick ref.png -quality 60 out.avif
magick compare -metric SSIM ref.png out.avif null:

Altere a qualidade até a diferença se aproximar do limite escolhido e compare o peso dos arquivos resultantes. O artigo sobre imagens rápidas para sites explica como relacionar peso e tempo de carregamento.

Duas colunas comparam as propriedades de JPEG e PNG às dos formatos modernos WebP e AVIF

Os formatos modernos reduzem o peso, mas exigem uma alternativa na marcação.

WebP ou AVIF?

WebP

Codifica rapidamente e abre em quase todo lugar, inclusive em muitos programas para computador. Tem transparência e animação. O limite por lado é 16 383 pixels. É uma boa opção padrão para bibliotecas grandes que são recompiladas com frequência.

AVIF

Comprime mais: mediana de 66 KB contra 119 KB do JPEG nos mesmos quadros. Aceita ampla gama e 12 bits. Demora várias vezes mais para codificar e nem sempre abre fora do navegador, portanto precisa de fallback.

Como migrar uma biblioteca para formatos modernos?

  1. Separe as imagens por tipo

    Coloque fotografias numa lista e gráficos com bordas nítidas ou transparência em outra. As regras são diferentes.

  2. Preserve os originais

    Todas as versões derivadas devem partir do original. Não é possível “melhorar” um arquivo já comprimido convertendo-o.

  3. Gere as versões

    Para fotografias, AVIF e WebP, com JPEG como alternativa. Para gráficos, SVG quando forem vetoriais; caso contrário, PNG com paleta reduzida.

  4. Declare a escolha na marcação

    Use picture com vários elementos source: o navegador escolhe o primeiro formato que reconhece e ignora os demais.

  5. Verifique peso e qualidade por amostragem

    Dez quadros variados bastam: fundo uniforme, textura fina e gráfico de alto contraste.

  6. Mantenha um caminho de volta

    Um link em e-mail, uma exportação para parceiros ou um arquivo para a gráfica ainda deve ser JPEG ou TIFF, não AVIF.

E GIF e SVG?

O tempo do GIF passou: são 256 cores e um limite de 65 536 pixels por lado. A única finalidade que ainda lhe resta — animações curtas — é atendida melhor por WebP, AVIF ou vídeo comum.

SVG é diferente: descreve formas, não pixels. Logotipos, ícones, diagramas e gráficos escalam sem perdas e ocupam poucos kilobytes. A regra é simples: se a imagem foi desenhada, e não fotografada, comece com SVG.

O que isso significa ao trabalhar com um banco de imagens?

Um arquivo de banco chega num formato conveniente para armazenamento, não para sua página. Ele é a fonte para criar versões destinadas a cada posição. Capas e prévias da Picwin são entregues em WebP, e a vitrine declara o tipo de cada imagem para que o navegador não precise adivinhar.

Ilustração

Ilustrações e gráficos são a parte do catálogo que mais costuma precisar de vetor ou PNG transparente.

Ver os trabalhosTexturas

Texturas e fundos: cenas uniformes comprimem melhor, e nelas a diferença entre formatos fica mais evidente.

Ver os trabalhos

Pontos principais

  • Escolha pelo nível de perda, transparência, animação e compatibilidade.
  • Para fotos, WebP ou AVIF com JPEG de fallback; para gráficos, SVG ou PNG.
  • Com qualidade equivalente, AVIF foi 45% mais leve que JPEG e WebP foi 22% mais leve.
  • WebP tem limite de 16 383 pixels por lado; no AVIF, o limite prático é inalcançável.
  • A economia depende da cena: meça seus próprios quadros.
Qual é melhor, WebP ou AVIF?

AVIF comprime mais; WebP codifica mais rápido e abre em mais programas. Uma solução prática oferece ambos por picture e mantém JPEG como alternativa.

Já podemos abandonar JPEG?

Quase, dentro de sites; fora deles, não. E-mails, exportações, gráficas e sistemas internos ainda dependem de JPEG e TIFF.

Converter JPEG em WebP reduz a qualidade?

Sim, ao salvar com perdas. Os artefatos existentes permanecem e outros são acrescentados. Converta a partir do original, não de uma cópia comprimida.

Por que uma fotografia PNG pesa dez megabytes?

Porque PNG comprime sem perdas. Para fotos, isso preserva quase todos os tons; nossos PNGs de referência já pesavam 1–2 MB com 1200 pixels de largura.

Qual formato escolher para um logotipo?

SVG, se houver vetor. Caso contrário, PNG transparente; em dimensões pequenas, uma paleta de 64 cores basta.

Todos os navegadores aceitam AVIF?

As versões atuais dos principais navegadores, sim, mas fora deles a compatibilidade varia. É justamente por isso que a MDN recomenda fallback em picture.

O que é subamostragem 4:2:0 e quando ela atrapalha?

É o armazenamento da cor com metade da resolução. Passa despercebida em fotos, mas cria bordas sujas em texto colorido e linhas finas; nesses casos, use PNG ou compressão sem perdas.

Continue com dimensões e resolução, preparação de imagens para sites rápidos e preparação para impressão. Veja trabalhos prontos no catálogo.