Três formatos cobrem quase todas as fotografias da Web hoje O JPG é o padrão há três décadas O WebP chegou em 2010 e agora é exibido por todos os navegadores atuais O AVIF é o mais novo dos três, construído em um codec de vídeo, e geralmente faz os menores arquivos Uma auditoria de desempenho lhe dirá para o & quot; servir imagens em formatos modernos & quot; e, em seguida, um formulário de upload ou um cliente de e-mail recusará o arquivo moderno que você fez.
Escolher entre eles é menos sobre qual formato é melhor e mais sobre onde a imagem está indo Uma imagem de herói em uma landing page, uma foto de produto em uma listagem de mercado e uma imagem anexada a um e-mail têm respostas diferentes Este guia compara os três sobre os atributos que o decidem: tamanho do arquivo, qualidade, transparência, profundidade de cor, animação, custo de codificação e suporte fora do navegador Em seguida, ele dá uma tabela de decisão e mostra como converter entre eles.
tl;dr: Para imagens em um site, sirva AVIF primeiro com WebP como fallback e JPG como último recurso, usando o
<picture>negociação de elementos ou servidores; AVIF é geralmente menor, WebP é próximo e mais rápido para codificar, e JPG abre em todos os lugares Para imagens que saem do navegador (e-mail, uploads, impressão, software de escritório), use JPG, ou PNG quando a transparência importa Para fazer arquivos outros programas aceitar, o Conversor AVIF para JPG e WebP para JPG executam o lado do cliente, nada carregado, gratuito, sem inscrição; JPG para WebP e PNG para WebP vão para o outro lado.
O que são AVIF, WebP e JPG?
Todos os três são formatos de imagem raster para fotografias e diferem principalmente na idade e no design de sua compactação.
JPG (JPEG) é o método de imagem estática padronizado em Recomendação T.81 da UIT-T em 1992. Ele divide a imagem em blocos de 8x8 pixels, transforma cada um com uma transformada discreta de cosseno e descarta o detalhe de alta frequência que o olho menos percebe. Os arquivos geralmente são embrulhados no contêiner JFIF ITU-T T.871.
WebP é o formato Google's, agora especificado em RFC 9649. Seu modo com perdas usa a codificação de quadro-chave do codec de vídeo VP8 e possui um modo sem perdas separado, além de transparência e animação. O guia ativado o que é WebP e por que as imagens salvas são publicadas como.webp cobre-o em profundidade.
avif é o AV1 Image File Format, publicado pela Alliance for Open Media como o Especificação AVIF. Armazena imagens codificadas com o Codec de vídeo AV1 dentro de um contêiner HEIF, a mesma estrutura de caixa que as fotos do iPhone HEIC usam AV1 é oferecida sob uma licença de patente isenta de royalties da Alliance for Open Media, que é uma das razões pelas quais os navegadores adotaram o AVIF mais rápido que o HEIC.
AVIF vs WebP vs JPG: a tabela de comparação
AVIF lidera em compactação e capacidade, JPG lidera em compatibilidade e velocidade de codificação e WebP fica entre eles em quase todas as linhas.
| Atribuir | avif | WebP | JPG |
|---|---|---|---|
| Especificação | Codec AOMedia AVIF, AV1 | IETF RFC 9649 | ITU-T T.81 e T.871 |
| Introduzido | 2019 | 2010 | 1992 |
| Compressão | Perdido ou sem perdas | Perdido ou sem perdas | com perdas |
| Tamanho típico da foto | Menor | Pequeno | Maior dos três |
| Profundidade bit | 8, 10 ou 12 bits por canal | 8 bits por canal | 8 bits por canal na prática |
| HDR e cor larga | sim | não | não |
| transparência | Alfa completo | Alfa completo | nenhum |
| Animação | Sequências imagem | sim | não |
| Velocidade de codificação | Lento, CPU-pesado em alto esforço | Moderado | veloz |
| Exibição navegador | Chrome 85, Firefox 93, Safari 16, Edge 121 e posterior | Todos os navegadores atuais | Universal |
| Aplicativos de desktop, e-mail, formulários de upload | Fraco | Patchy | Universal |
| Melhor uso | Maiores imagens da web onde os bytes são mais importantes | Imagens gerais da web, amplo fallback | Qualquer coisa que saia do navegador |
A linha que surpreende as pessoas é a velocidade de codificação AVIF' s pequenos arquivos vêm de um codificador que procura muito a melhor maneira de codificar cada bloco, e essa pesquisa leva tempo Uma etapa de construção que converte milhares de imagens de produtos para WebP em minutos pode levar muito mais tempo para AVIF em um alto esforço de configuração Para um site que codifica uma vez e serve milhões de vezes, o comércio geralmente vale a pena Para imagens geradas em tempo real por solicitação, pode não ser.
Qual formato faz os menores arquivos?
AVIF geralmente faz os menores arquivos com qualidade visual semelhante, WebP é o próximo e JPG é o maior O tamanho da lacuna depende muito da imagem e das configurações do codificador.
Para WebP existe um ponto de referência publicado: Google's Visão geral do WebP relata arquivos WebP com perdas 25 a 34% menores que JPEG comparáveis com qualidade SSIM equivalente e WebP sem perdas 26% menores que PNG. AVIF geralmente melhora o WebP novamente para fotografias, com os maiores ganhos em gradientes suaves, céu e pele, onde JPEG e #39; os blocos 8x8 mostram primeiro.
Três advertências mantêm esses números honestos.
- Os números de qualidade não correspondem entre os formatos. Um JPG na qualidade 80, um WebP em 80 e um AVIF em 80 não são a mesma qualidade visual, e codificadores diferentes para o mesmo formato discordam também Compare arquivos olhando para eles, ou por uma métrica como SSIM, nunca pelo valor do controle deslizante.
- Imagens com poucos detalhes economizam menos. Uma ilustração plana ou um JPEG já fortemente compactado tem pouco a ser apertado.
- Recodificar perdas de pilhas de arquivos com perdas. A conversão de um JPG para AVIF ou WebP começa a partir de uma imagem que já perdeu detalhes Codifique a partir do arquivo original da câmera, PNG ou mestre de alta qualidade sempre que puder.
Quanto importa a escolha do formato para o peso da página?
É mais importante em páginas com muita imagem, porque as imagens são geralmente a maior parte do que um visitante baixa A aritmética é direta Uma página de catálogo com 40 fotos de produtos a cerca de 400 KB cada carrega 16 MB de imagens como JPG. Na economia de 25 a 34% de relatórios do Google para WebP, o mesmo conjunto pousa em algum lugar entre cerca de 10,5 e 12 MB AVIF normalmente apara mais em cima disso.
Em uma conexão rápida de desktop a diferença é modesta Em um telefone através de uma rede móvel lenta, vários megabytes é a lacuna entre uma página que se instala rapidamente e uma que os visitantes abandonam, e imagens perto do topo da página alimentam diretamente a rapidez com que o maior elemento visível renderiza.
Formato não é a única alavanca, e muitas vezes não o maior Enviando uma foto de 4000 px de largura para um slot de 400 px desperdiça muito mais bytes do que escolher WebP sobre AVIF Redimensionar para o tamanho exibido primeiro, fornecer srcset variantes para telas diferentes, preguiçoso-carregar imagens abaixo da dobra, e, em seguida, escolher o formato Fazendo-o na outra ordem otimiza a coisa errada.
Como eles diferem em qualidade e artefatos?
Cada formato falha à sua maneira quando enviado para tamanhos pequenos, e saber a falha ajuda você a escolher.
JPG divide-se em blocos visíveis 8x8 e & quot;ringing", ondulações fracas em torno de bordas afiadas, como texto em uma foto WebP & #39; s modo com perdas suaviza detalhes e, porque armazena cor em meia resolução, pode deixar franjas coloridas em torno de linhas finas vermelhas ou azuis AVIF tende a desfocar textura fina em vez de bloquear, de modo que um AVIF fortemente comprimido parece suave e ligeiramente ceroso, o que é menos censurável em fotos e mais perceptível em tecido, cabelo e folhagem.
Para gráficos com bordas duras, cor plana e texto, nenhum dos modos com perdas é ideal PNG ou WebP sem perdas mantém as bordas exatas.
O comportamento de carregamento difere também T.81 define um modo progressivo para JPEG, no qual uma versão desfocada de toda a imagem aparece primeiro e se aguça à medida que mais dados chegam, então um grande JPG progressivo se sente rápido em uma conexão lenta mesmo antes de terminar WebP e AVIF como comumente servido desenham apenas uma vez que o suficiente do arquivo chegou, o que seu tamanho menor geralmente compensa Em imagens de heróis muito grandes sobre conexões ruins, essa diferença pode ser visível, e é mais uma razão para redimensionar antes de escolher um formato.
Onde se encaixam PNG e GIF?
Nem é um formato de foto, e nenhum compete diretamente com os três acima PNG, definido no Especificação PNG W3C, é sem perdas: a escolha certa para capturas de tela, diagramas, logotipos e mestres de edição, e a errada para fotografias, que armazena em várias vezes o tamanho de um JPG. GIF é limitado a 256 cores por quadro e sobrevive principalmente para animações curtas em lugares que não vão jogar nada mais novo.
Em um site, ambos são geralmente melhor servidos como WebP ou AVIF: sem perdas ou com perdas de alta qualidade para gráficos estilo PNG, WebP animado para clipes estilo GIF. Fora do navegador, PNG continua a ser o formato seguro para qualquer coisa com transparência, uma vez que JPG não pode segurá-lo.
Qual formato suporta transparência, HDR e animação?
AVIF suporta todos os três, WebP suporta transparência e animação, mas não HDR, e JPG suporta nenhum deles.
Transparência. AVIF armazena alfa como uma imagem auxiliar, e WebP tem um canal alfa em ambos os modos com perdas e sem perdas, Ou pode segurar um recorte de produto com uma borda macia em uma fração de um tamanho PNG' s. JPG não tem transparência, então qualquer área transparente deve ser preenchida com uma cor sólida ao converter para ele.
HDR e cor larga. AVIF pode usar 10 ou 12 bits por canal, que é o que fotos HDR de telefones e câmeras recentes precisam para evitar bandas em céus brilhantes WebP e JPG são de 8 bits.
Animação. As animações WebP são amplamente utilizadas como um substituto menor para GIF. AVIF define sequências de imagens, embora o suporte para AVIF animado em software fora dos navegadores seja mais fino.
Onde cada formato ainda falha?
O suporte dentro dos navegadores atuais é resolvido para todos os três O suporte em qualquer outro lugar é onde a escolha morde.
AVIF exibe no Chrome a partir da versão 85, Firefox a partir de 93, Safari a partir de 16, e Edge a partir de 121 Navegadores mais antigos, visualizadores de fotos mais antigos do sistema operacional, muitas suítes de escritório, e uma longa lista de formulários de upload não aceitá-lo Salvar um AVIF de uma página da web e soltá-lo em uma apresentação é o fracasso clássico.
O WebP está mais adiante Todo navegador atual o exibe e a maioria dos sistemas operacionais modernos o abre, mas alguns clientes de e-mail, serviços de impressão e software de desktop mais antigo ainda o recusam.
JPG abre em essencialmente todos os dispositivos, aplicativos e formulários É por isso que continua a ser o formato certo para qualquer imagem cujo destino você não controla.
Qual formato você deve usar? Uma tabela de decisão
Decida primeiro por destino e depois por conteúdo.
| situação | usar | por que |
|---|---|---|
| Imagens de heróis e produtos em seu próprio site | AVIF, com fallbacks WebP e JPG | Menores bytes nas imagens mais pesadas |
| Imagens gerais do site, pipeline simples | WebP, com fallback JPG | Suporte quase universal ao navegador, rápido de codificar |
| Imagens geradas por solicitação | WebP ou JPG | O custo de codificação AVIF adiciona latência |
| Fotos com HDR ou cor larga | avif | Apenas um dos três com 10 e 12 bits |
| Gráficos transparentes na web | AVIF ou WebP | Alfa em uma fração de PNG's tamanho |
| Anexos e-mail | JPG | Cada cliente abre |
| Carregar formulários, marketplaces, portais de ID | JPG | As listas de permissões raramente incluem AVIF ou WebP |
| Impressão e documentos de escritório | JPG, ou PNG para gráficos | Suporte software |
| Edição de mestres e arquivos | Formato original, PNG ou TIFF | Evite codificação com perdas repetidas |
O padrão é simples: formatos modernos para entrega, JPG para troca, sem perdas para mestres.
Como você atende AVIF e WebP com um fallback JPG?
use o <picture> elemento. O navegador caminha pelo <source> liste em ordem e pegue o primeiro tipo que suporta, voltando ao <img>, conforme definido pelo WHATWG HTML picture elemento:
<picture>
<source srcset="hero-1600.avif" type="image/avif">
<source srcset="hero-1600.webp" type="image/webp">
<img src="hero-1600.jpg" width="1600" height="900" alt="Mountain lake at sunrise">
</picture>
Um navegador com suporte AVIF baixa apenas o AVIF Um sem AVIF, mas com WebP baixa o WebP, e todo o resto recebe o JPG Nenhum formato é baixado duas vezes.
A alternativa é a negociação do lado do servidor: o navegador envia um Accept cabeçalho como image/avif,image/webp,*/*& n, e o servidor ou CDN retorna o melhor formato que tem de um único URL Isso mantém a marcação simples, mas requer que o cache varie nesse cabeçalho, conforme descrito em HTTP & #39; s regras de negociação de conteúdo em RFC 9110.
Para gerar as três versões em uma etapa de compilação, a biblioteca Node.js sharp escreve todas elas:
import sharp from 'sharp'
const input = sharp('hero-master.png').resize(1600)
await input.clone().avif({ quality: 50 }).toFile('hero-1600.avif')
await input.clone().webp({ quality: 80 }).toFile('hero-1600.webp')
await input.clone().jpeg({ quality: 82, mozjpeg: true }).toFile('hero-1600.jpg')
Os valores de qualidade diferem de propósito, uma vez que as escalas não correspondem entre formatos Verifique a saída visualmente antes de se estabelecer em números.
Como você converte entre AVIF, WebP e JPG sem fazer upload?
Use um conversor do lado do cliente, que decodifica e recodifica a imagem dentro da guia do navegador para que o arquivo nunca saia do seu dispositivo Os conversores Toolz são divididos por direção.
Do AVIF a algo que outros programas aceitam. o Conversor AVIF para JPG é a correção para um AVIF salvo de um site que um documento ou formulário recusa As áreas transparentes são preenchidas com branco, e uma nota sob o resultado diz que O controle deslizante Qualidade corre de 10 a 100 e começa em 90. quando a imagem tem um fundo transparente que deve sobreviver, converta o AVIF para PNG em vez disso, que mantém o canal alfa e armazena os pixels decodificados sem perdas.
A decodificação AVIF usa o navegador & #39; s próprio decodificador AVIF, então o conversor precisa de um navegador que exiba AVIF: Chrome, Edge, Firefox ou Safari 16 e posterior Se o navegador não puder abrir o arquivo, a linha diz que Um AVIF animado é lido como uma imagem estática.
Do WebP ao JPG. Pelas mesmas razões, WebP para JPG transforma um .webp baixado em um arquivo que abre em todos os lugares, com o mesmo preenchimento branco para transparência.
De JPG e PNG a WebP. Indo para o outro lado, JPG para WebP reduz fotos para publicação e PNG para WebP faz o mesmo para capturas de tela e gráficos transparentes, mantendo o canal alfa. A codificação usa o codificador de tela browser' s. O Chrome, Edge e Firefox atuais podem escrever WebP; um navegador que não consegue obter um erro claro em vez de um PNG renomeado para.webp.
O que os conversores não fazem. Toolz lê AVIF, mas não o escreve, porque os navegadores não expõem de forma confiável um codificador AVIF às páginas da web Para produzir arquivos AVIF, use uma ferramenta de compilação, como o exemplo nítido acima Conversor de imagem aceita JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, SVG, CR2, DNG e PDF e escreve JPG, PNG, WebP, GIF, ICO, PDF e SVG, que abrange lotes mistos.
Toda conversão é desenhada através de uma tela, de modo que os dados EXIF, coordenadas GPS e perfis de cores não são copiados na saída Imagens com mais de 100 megapixels são recusadas com uma mensagem em vez de travar a guia As ferramentas são gratuitas, sem inscrição, com um limite de conversão diário.
A conversão entre AVIF, WebP e JPG perde qualidade?
Converter em um formato com perdas perde algum detalhe todas as vezes, e converter em um formato sem perdas não perde mais nada A direção decide qual se aplica.
| conversão | Passo perdido? | O que muda |
|---|---|---|
| AVIF para JPG | sim | Segunda codificação com perdas; transparência preenchida com branco; arquivo geralmente maior |
| AVIF para PNG | não | Pixels decodificados mantidos exatamente; transparência mantida; arquivo muito maior |
| WebP para JPG | sim | Segunda codificação com perdas; transparência cheia de branco |
| JPG para WebP | sim | Segunda codificação com perdas em cima de JPEG' s; arquivo geralmente menor |
| PNG para WebP | Normalmente, com WebP com perdas | Transparência mantida; arquivo geralmente muito menor |
| Qualquer um deles para AVIF | Sim, em uso típico | Arquivo menor; codificação mais lenta |
Seguem-se duas consequências práticas Um ficheiro que passou por várias conversões com perdas degrada-se um pouco em cada passo, por isso evite viagens de ida e volta como JPG para WebP para JPG E o tamanho de um ficheiro convertido diz-lhe pouco sobre a sua qualidade: um AVIF convertido para JPG fica maior sem melhorar, porque o codificador JPG gasta mais bytes descrevendo a mesma imagem já comprimida.
Em uma configuração de qualidade em torno de 90, um único passo extra com perdas é muito difícil de ver em fotos comuns As perdas tornam-se visíveis com conversões repetidas, configurações de baixa qualidade ou imagens com texto fino e bordas afiadas.
Por que ganhou & #39; t um AVIF ou WebP salvo aberto?
A abertura do programa não tem decodificador para o formato Um navegador atual mostra a imagem porque negociou esse formato com o servidor, mas o arquivo no disco é então entregue a um software com uma lista mais antiga ou mais restrita de formatos: uma suíte de escritório, um visualizador de fotos mais antigo, um cliente de e-mail ou um formulário de upload & #39; s allow-list.
Renomeando o arquivo para .jpg não ajuda Os bytes ainda começam com um AVIF ftyp caixa ou um WebP RIFF cabeçalho, e um programa esperando JPEG não encontra dados JPEG Converter o arquivo é a correção, e também vale a pena verificar se o site oferece um link de download direto, que às vezes serve o JPG original ou PNG em vez da versão negociada.
O JPG está obsoleto?
O JPG no é obsoleto apenas porque o formato que um site deve enviar para um navegador atual e, mesmo lá, continua sendo o recurso em todos <picture> elemento. Como um formato de troca, para e-mail, formulários, impressão, documentos de escritório e qualquer coisa direcionada para software que você não controla, ainda é o padrão correto, e nem AVIF nem WebP o substituíram.
A mesma lógica se aplica ao outro formato que confunde pessoas fora do navegador As fotos do iPhone são HEIC, um irmão de AVIF no mesmo contêiner HEIF, e a comparação de HEIC vs JPG explica por que esses arquivos não conseguem abrir no Windows. Cada conversor de imagem está listado no hub de ferramentas de imagem.
