Por que o formato de imagem Avif é importante (e quais são os planos Imagify)

Você já experimentou o Avif — o mais recente formato de imagem poderoso? No Imagify, começamos a receber perguntas sobre por que nosso plugin não o suporta (spoiler: ainda ).

Neste artigo, você descobrirá por que o Avif pode ser um divisor de águas para a otimização de imagens e sua posição em comparação com os formatos mais populares, como JPG e WebP. E, claro, você aprenderá mais sobre os planos da Imagify para apoiar o Avif.

Qual é o formato de imagem Avif?

Avif é um formato de imagem baseado no codec de vídeo AV1 — ele compacta imagens com AV1 no formato de arquivo HEIF (High-Efficiency Image File). Em linguagem simples, isso significa que as imagens são compactadas da melhor maneira possível - elas são mais leves do que nunca em tamanho, mantendo a mesma qualidade . Uma compactação tão poderosa acompanha outros recursos importantes, como suporte a HDR (High Dynamic Range) e resolução de cores de 12 bits.

E há mais.

Avif é um software de código aberto e é isento de royalties - isso significa que, se você quiser usá-lo para qualquer projeto ou negócio de compactação de imagem, não precisará pagar nada.

O Avif foi desenvolvido por muitos gigantes da tecnologia, como Google, Amazon, Cisco, Netflix e muitos outros. A razão é simples. Essas empresas estão extremamente interessadas em desenvolver e difundir um formato de imagem de alta qualidade que não precise de muita largura de banda — é assim que mais e mais pessoas podem consumir conteúdo em seus dispositivos.

Dado o seu excelente desempenho, o Avif parece ser o substituto perfeito para os formatos mais pesados, como JPEG e WebP. Até um tempo atrás, havia apenas um problema: compatibilidade do navegador.

Quais navegadores suportam Avif

Por muito tempo, apenas uma pequena parte dos navegadores suportava o Avif. Em outras palavras, a maioria dos usuários não conseguiria visualizar nenhuma foto no formato Avif. A partir de outubro de 2021, as coisas estão diferentes. Agora, o Avif é suportado pelo Firefox, Chrome e Opera. No geral, 67% dos usuários podem se beneficiar do formato.

E é por isso que é hora de começar a levar o Avif em séria consideração para a otimização do desempenho da imagem.

Comparando o desempenho: Avif vs. WebP (e outros formatos)

Mencionamos como o formato Avif oferece a melhor compactação do mercado e mantém a alta qualidade das imagens. Vamos fazer uma comparação de desempenho de imagem e ver como o Avif se posiciona em relação a formatos como JPEG e WebP.

Usaremos o Squoosh, um aplicativo da web que compara facilmente diferentes formatos.

Vamos pegar um dos formatos de imagem mais pesados ​​como ponto de partida e ver o desempenho dos outros formatos. Escolhemos uma imagem PNG com tamanho original de 15,6 MB e medimos a diferença entre o tamanho original e a conversão para o formato JPG.

A conversão de PNG para JPG apresenta uma redução de 92% . O tamanho da imagem agora é de 1,20 MB. Como JPG não é o formato mais leve de todos os tempos, e sabemos disso, não poderíamos esperar mais do que isso.

E o WebP? Fizemos a comparação novamente. Desta vez, a imagem PNG foi compactada em 95% . O tamanho da imagem agora é de 704 KB. Dado o tamanho inicial (15,6 MB), é um ótimo resultado — e é difícil ver qualquer queda na qualidade da imagem. Afinal, WebP é o formato de imagem que você deve usar no WordPress.

Em seguida, fizemos a comparação novamente e descobrimos que o formato Avif atende às expectativas de desempenho.

O tamanho da imagem foi reduzido em 98% . São apenas 261 KB — e ainda é difícil notar qualquer diferença na qualidade da imagem.

Aqui está a recapitulação completa das comparações que fizemos. Mostra como o Avif pode reduzir o tamanho das suas imagens.

E agora você pode estar se perguntando: por que o Imagify não suporta Avif? Isso nos leva à próxima seção.

Por que o Imagify não suporta Avif (ainda)

Jean-Baptiste Marchand-Arvier, cofundador e CEO da WP Media, explica: “O Avif foi lançado como um formato experimental e uma porcentagem muito pequena de navegadores o suportava. Além disso, Avif passou por alguns problemas devido ao tempo de codificação. No início, a codificação levaria vários segundos por imagem, o que é extremamente lento. Como comparação, a compactação de imagens no Imagify geralmente leva menos de 100ms. Desde então, tem havido muito trabalho para melhorar o desempenho”.

Como você pode ver na captura de tela abaixo, o tempo de codificação está ficando cada vez melhor:

Jean-Baptiste continua: “Além das melhorias no tempo de codificação, agora mais navegadores estão suportando Avif. E esse formato é extremamente interessante por dois motivos: ele suporta canal alfa (transparência), então pode ser usado como substituto do PNG, e suporta animação para ser usada como substituto do GIF.

É por isso que a Imagify certamente apoiará a Avif em breve”.

E acrescenta: “Provavelmente vamos substituir o WebP pelo Avif. Caso contrário, pode ser muito complexo ou confuso para nossos usuários”.

Se você está se perguntando o que isso significa, aqui está algum contexto.

O WebP foi lançado em 2010, há mais de 10 anos. No entanto, ainda não é totalmente compatível com navegadores e sistemas operacionais. A única compatibilidade parcial implica duas coisas. Como proprietário de um site, você ainda precisa lidar com 2 formatos diferentes: o “clássico”, como JPG ou PNG, e o mais performático, como WebP ou Avif. Por outro lado, plugins de otimização de imagem, como o Imagify, precisam armazenar em seus servidores os dois formatos.

“Do ponto de vista do usuário”, diz Jean-Baptiste, “significa que um novo formato como o Avif não ajudará no final a substituir JPG ou PNG – eles vão ficar. No entanto, converter esses formatos para Avif ajudará a melhorar o desempenho da imagem, e é por isso que o Avif substituirá o WebP em algum momento. Os usuários não precisarão dos dois formatos. E queremos manter o plugin o mais simples possível ”.

WebP ainda é uma ótima maneira de otimizar suas imagens

Portanto, você ainda não pode converter suas imagens para Avif com o Imagify, mas sempre pode converter suas imagens para WebP e aumentar o desempenho de sua imagem agora mesmo.

Mais de 90% dos usuários em todo o mundo poderão ver suas imagens convertidas no formato WebP, então ainda é uma ótima opção para deixar suas fotos mais leves e otimizar o desempenho do seu site.

Ao executar uma auditoria do PageSpeed ​​Insights, você pode se deparar com a recomendação de desempenho sobre a veiculação de imagens em formatos de última geração. Bem, o WebP é exatamente o formato de última geração que o Google recomenda ao lado do Avif. É tudo que você precisa para fazer suas imagens carregarem mais rápido.

Fizemos um teste e criamos três páginas. Cada página contém apenas a imagem em um formato específico: PNG, JPG ou WebP.

Ao executar a auditoria do PageSpeed ​​Insights para a página, incluindo a imagem PNG, recebemos uma bandeira vermelha sobre a recomendação de formato de próxima geração. Você pode ver como a economia estimada é enorme: 1.076,7 KB .

O mesmo vale ao testar a página com a imagem JPG. O desempenho melhorou um pouco e recebemos uma bandeira laranja. Ainda assim, há espaço para melhorias — uma economia potencial de 16,8 KB .

Não é surpresa que a recomendação se torne uma auditoria aprovada quando convertemos a imagem para WebP com o Imagify e criamos uma página dedicada:

Obtivemos o mesmo resultado ao testar a página com a imagem Avif:

Assim, WebP e Avif entregam o mesmo ótimo resultado . Além disso, a pontuação do PageSpeed ​​Insights é praticamente a mesma:

Pontuação de desempenho - página WebP	Pontuação de desempenho - Página Avif

Também testamos a diferença de tamanho de imagem e bytes entre as páginas WebP e Avif. E também não notamos uma grande diferença:

Como você pode ver, o WebP e o Avif são bastante semelhantes em fornecer excelente desempenho de imagem.

Por um lado, o Avif oferece uma otimização um pouco melhor. No entanto, a menos que seu site tenha milhares e milhares de imagens, seu desempenho será excelente usando WebP – também porque esse ainda é o formato de última geração mais comum.

Além disso, com Imagify, converter suas imagens para o formato WebP é fácil e mais rápido do que nunca, graças à nova compactação mais rápida que permite converter suas imagens rapidamente.

Aqui está o que você deve fazer:

1. Baixe Imagify gratuitamente
   
2. Vá para Configurações > Otimização > Formato WebP e marque as duas caixas:

3. Converta suas imagens (e aproveite a otimização em massa):

É isso. É tão simples - mas eficaz!

E você pode escolher o plano que mais combina com você.

Você pode otimizar 20 MB de imagens por mês gratuitamente ou pode escolher entre o Plano de Crescimento (500 MB por US$ 4,99 por mês) e o Plano Infinito (imagens ilimitadas por US$ 9,99 por mês). Não importa o plano que você escolher: você pode instalar o Imagify em um número ilimitado de sites.

Comece a otimizar suas imagens com o Imagify e deixe-nos saber como seu desempenho melhorou nos comentários.