Imagens AVIF o novo formato de compressão

O formato padrão AVIF serve para introduzir o usuário ao conceito de compressão avançada de imagens. Vamos nos concentrar em todos os detalhes do novo formato de compressão com um alto impacto na performance do seu site. Isso porque imagens representam mais de 50% dos dados do seu site e a otimização de imagens é algo que pode melhorar mais de 50% da web.

O novo formato de compressão de imagens já está disponível para Chrome 85, Opera 71, Firefox 93, Samsung Browser 17. O novo formato de compressão apresenta resultados ainda melhores que WebP e JPEG. O formato pode chegar criar uma redução de até 97% do formato original JPEG.

Vantagens das imagens AVIF

Primeiro precisamos entender o que é um arquivo AVIF? É o formato foi desenvolvido pelo Alliance for Open Media numa colaboração entre Google, Cisco e Xiph.org e é um formato de compressão de código aberto assim o seu uso gratuito.

Além disso, as imagens AVIF é um novo formato de compressão de imagens que oferece vantagens em relação aos formatos tradicionais, como o JPEG. Com o AVIF, é possível obter uma melhor qualidade de imagem ao mesmo tempo, em que se reduz o tamanho do arquivo. Além disso, o AVIF é compatível com a tecnologia HDR, o que permite que as imagens sejam exibidas com maior fidelidade às cores e detalhes originais.

Outra grande vantagem do AVIF é sua compatibilidade com a tecnologia de codificação HEVC, que permite uma maior compressão de dados sem perda significativa de qualidade. Dessa forma, é possível obter imagens de alta qualidade em menor espaço.

Como criar uma imagem AVIF?

Para criar uma imagem AVIF você terá dois caminhos, com a ferramenta Squoosh uma progressive web app que permite realizar compressões de imagens ou com a ferramenta de linha de comando FFmpeg.

Com Squoosh é só arrastar e soltar a imagem na apliação e escolher o formato que você quer exportar neste caso imagens AVIF. Com FFmpeg Você pode obter o software no site oficial do projeto ou do repositório da sua distribuição Linux favorita. Uma vez que você tem o FFmpeg instalado, basta executar o seguinte comando para converter uma imagem para o formato AVIF:

ffmpeg -i input.jpg -c:v libaom-av1 -strict experimental output.avifCode language: CSS (css)

Isso irá converter a imagem input.jpg para o formato AVIF e salvá-la como output.avif.

Outra pergunta frequente no meu canal é como fazer o caminho inverso transformar imagens AVIF, em formatos compatíveis com editores de imagens. Em outras palavras como utilizar avif com Photoshop, isso porque AVIF é um formato exclusivo para internet assim muitos dos editores não suportam o formato. Mas a solução é simples, você pode converter imagens AVIF em JPG e PNG com o Squoosh.app.

Teste comparativo AVIF vs JPG

JPG é um formato de imagem muito popular e amplamente utilizado, porém, nem sempre ele é a melhor escolha. Como qualquer formato de imagem, o JPG também tem os seus prós e contras.

Uma das principais vantagens do JPG é a sua versatilidade: ele pode ser usado em diversos tipos de imagens, desde fotos até gráficos e figuras. Outro ponto positivo é a sua compatibilidade com diversos dispositivos e aplicativos. Além disso, o formato JPG oferece uma boa compressão das imagens, tornando um dos formatos mais usados na web.

Mas JPG é um formato de compressão antigo com limitações para cores como HDR, e o script de compressão tem uma limitação comparado a formatos de compressão modernos

Para realizar os testes eu vou utilizar o squoosh.app uma PWA de compressão de imagens, para os nossos testes compararemos uma imagem 800x600px.

Para os testes eu vou tentar não reduzir a qualidade e manter as dimensões da imagem e os resultados foram os seguintes:

• JPEG: 328 kB
• WebP: 101kB (69% menor) effort 6
• AVIF: 8.49kb (97% menor) effort 6

Com Squoosh atualmente toma um tempo para comprimir o formato AVIF comparado a WebP, mas os resultados são impressionantes e quando colocamos a imagem lado a lado tomamos um tempo para perceber a diferença:

O formato de compressão AVIF reduz a quantidade de cores em partes e também realiza um blur em algumas partes, as mudanças não são muito perceptíveis temos que dar um zoom 700% para notar a diferença.

Ilustrações no formato AVIF

AVIF funciona muito bem com fotos, mas não se aplica a todos os casos, ilustrações com cores chapadas o resultado pode não ser satisfatório, por exemplo, o ícone do meu blog é uma imagem pixelada:

Como podemos ver na imagem acima, a compressão começa a arredondar as bordas pixeladas, tirando um pouco do efeito da imagem. Outra opção é desabilitar o efeito de blur durante a compressão, mas isso pode aumentar o tamanho das imagens comparadas a versão original.

Suporte

Atualmente(Setembro de 2022) o formato é suportado por 70% dos navegadores, EDGE, safari desktop, IE11 e opera mini.

Utilizando imagens AVIF com fallback

Caso queira utilizar o formato uma boa alternativa é trabalhar com a tag picture ela permite adicionar diferentes fontes para a mesma imagem onde o navegador irá decidir qual imagem irá utilizar:

<picture>
    <source type="image/avif" srcset="./imgs/foto-teste.avif"> 
    <source type="image/webp" srcset="./imgs/foto-teste.webp"> 
    <img alt="foto de uma rosa" src="./imgs/foto-teste.jpg">
</picture>Code language: HTML, XML (xml)

Quais são os tipos de imagens suportados na web?

Vimos que temos uma opção de adicionar formatos de imagens alternativos na nossa imagem principal e quais são os formatos suportados na web?

• GIF(Graphics Interchange Format): A solução mais antiga para animações simples e imagens estáticas. Prefira PNG para imagens estáticas sem perdas e indexadas e considere WebP, AVIF ou APNG para sequências de animação.
• JPG(Joint Photographic Expert Group image): A solução de imagem mais popular, boa escolha para compactação com perdas de imagens estáticas. Prefira Imagens AVIF/WebP se for necessária uma melhor reprodução e maior compactação.
• PNG(Portable Network Graphics): O PNG é preferível ao JPEG para uma reprodução mais precisa das imagens de origem ou quando a transparência é necessária. O Imagens WebP/AVIF oferece compactação e reprodução ainda melhores.
• SVG(Scalable Vector Graphics): Formato de imagem vetorial; ideal para elementos de interface do usuário, ícones, diagramas, etc., que devem ser desenhados com precisão em diferentes tamanhos.
• WEBP(Web Picture format): Excelente escolha para imagens e imagens animadas. WebP oferece uma compactação muito melhor do que PNG ou JPEG com suporte para profundidades de cor mais altas, quadros animados, transparência etc. Imagens AVIF oferece compactação um pouco melhor, mas não é tão bem suportado em navegadores e não suporta renderização progressiva.

No meu canal apresentei esse recurso a um tempo atrás:

Se você gostou do conteúdo sobre Imagens AVIF por favor confira mais conteúdo sobre desenvolvimento front-end no canal:

• CSS Aspect-ratio: Mantendo as proporções das imagens
• Introdução a imagens responsivas com srcset
• Otimização de imagens para SEO