Categorias

PageSpeed Optimization: Obtenha Imagens de Carregamento Mais Rápido Parte 2 - AVIF

A velocidade da página é um componente crucial para um website. Você pode aumentar a velocidade do seu site fazendo uma variedade de modificações na otimização da velocidade da página. Uma delas é a otimização de imagem.

Na parte 1 do nosso PageSpeed Optimization: Obtenha Imagens de Carregamento Mais Rápido artigo, falamos tudo sobre WebP, o que é, e como implementá-lo em seu site. Outro formato de imagem de próxima geração que está ganhando popularidade devido a sua capacidade de compressão, sem sacrificar a qualidade da imagem é o AVIF.

AVIF é um formato de imagem de fonte aberta, livre de royalties, baseado no codec de vídeo AV1 desenvolvido pela Alliance for Open Media (AOMedia) em colaboração com Google, Cisco, e Xiph.org.

Com AVIF, as imagens são comprimidas e tornadas menores, mantendo a mesma qualidade da imagem original. AVIF oferece a melhor compressão do mercado, mantendo ao mesmo tempo a qualidade das imagens elevada. Ele suporta qualquer codec de imagem e reduz significativamente o tamanho do arquivo em comparação com JPEG, PNG, e até mesmo WebP.

Comparado ao JPEG, AVIF é 50% menos em tamanho, e em comparação ao WebP, é 20-30% menos em tamanho de arquivo, sem perda de qualidade.

AVIF foi desenvolvido por muitas empresas como Google, Amazon, Cisco e Netflix, entre outras. Estas empresas estão desenvolvendo o formato devido a sua necessidade de imagens de alta qualidade que não consomem muita largura de banda. A Netflix até mesmo alegou que o AVIF é muito superior ao JPEG, PNG e WebP, e está atualmente servindo-o para suas miniaturas de imagem.

logos moomba

O formato de imagem AVIF suporta estas seguintes características, tornando-as potencialmente melhores em comparação com outros formatos de imagem:

  • 8, 10, 12 bits de profundidade de cor
  • Compressão sem perda e compressão com perda
  • Monocromático (alfa/profundidade) ou multi-componentes
  • Inclui um canal alfa que dá um toque mais rico às imagens
  • 4:2:0, 4:2:2, 4:4:4 subamostragem de croma
  • Qualquer espaço de cor incluindo: ampla gama de cores, ISO/IEC CICP e perfis ICC
  • Alta faixa dinâmica, fornecendo imagens melhores e mais brilhantes
  • Grão de filme
  • A mais alta compressão no formato livre de royalties

Embora o formato de imagem AVIF tenha muitas vantagens, a principal desvantagem é sua disponibilidade e suporte ao navegador.

A partir de sua redação (novembro de 2021), AVIF é apoiado por Firefox, Chrome, Android e Opera. A partir do momento, Microsoft Edge e Safari não suportam o formato de imagem. Entretanto, se você for um usuário Microsoft, há um add-on disponível que pode ser baixado e que oferece suporte a ele. Além disso, o Firefox ainda não oferece suporte a AVIFs animados.

webp e avif

WebP vs. AVIF

WebP e AVIF são ambos formatos de imagem de próxima geração que são recomendados pelo Google em sua ferramenta PageSpeed Insights. O WebP é muito mais antigo em comparação com AVIF e foi desenvolvido pelo próprio Google. Também é muito comumente usado e é suportado por mais navegadores da web em comparação com AVIF.

O AVIF, entretanto, é muito menor e se torna mais rápido em comparação com o WebP. Na verdade, é cerca de 20-30% a menos em comparação com o WebP. A única desvantagem do AVIF é que, neste momento, ele não é tão amplamente apoiado, em comparação com o WebP.

As perspectivas para AVIF são brilhantes, mas o suporte para Edge e Safari pode vir mais rápido, pois é visto como um formato de imagem muito promissor.

Além desses fatores principais a serem considerados, aqui estão mais algumas diferenças entre AVIF e WebP a serem consideradas:

  • WebP funciona em apenas 8 bits de profundidade, enquanto AVIF suporta 8, 10 e 12 bits, o que aceita uma gama mais ampla de imagens para compressão
  • WebP suporta apenas o canal 4:2:0, enquanto AVIF suporta 4:2:0, 4:2:2, e 4:4:4
  • AVIF produz uma melhor qualidade de imagem em comparação com WebP
  • AVIF suporta HDR, que produz imagens de alta luminosidade.

Tanto WebP quanto AVIF têm vantagens e desvantagens em relação à outra. Quando se trata de qual escolher entre os dois, seria principalmente a sua preferência, que tipo de site você tem, e qual seria o que lhe traria mais benefícios.

Como implementar o AVIF em seu site

implementação avif

Há alguns programas e aplicativos que você poderia usar para converter suas imagens para AVIF. Um que é recomendado é o Squoosh, que é um aplicativo Web de compressão de imagens que foi desenvolvido pela própria equipe do Google Chrome Labs. Outros programas a serem usados são o GIMP e o Microsoft Paint. Infelizmente, o Photoshop não o suporta a partir deste momento.

Como AVIF ainda é uma tecnologia bastante nova e ainda não é totalmente suportada em todos os navegadores, quando se trata de implementação, há duas formas principais de servir o formato - através do elemento imagem e através da negociação de conteúdo.

Isto é usado para que se o navegador usado não suportar AVIF, ele exibirá outro tipo de imagem, em vez disso.

Aqui está um exemplo do código que você poderia acrescentar ao <body> tags em sua página.

<picture>
<source srcset=”images/example.avif” type=”image/avif”>
<source srcset=”images/example.webp” type=”image/webp”>
<img src=”images/example.jpg” alt=&quot;descrição of example image”>

</picture>

A negociação de conteúdo permite que o servidor sirva formatos baseados no que é suportado pelo navegador. Os navegadores que suportam um formato específico podem anunciá-lo adicionando o formato ao seu Cabeçalho de Solicitação de Aceitação. Por exemplo, o Cabeçalho de Solicitação de Aceitação de imagens em Cromo é:


Aceitar: image/avif,image/webp,image/apng,image/*,*/*;q=0,8

O código para verificar se o AVIF é suportado no manipulador de eventos fetch pode se parecer com algo assim:


const hdrAccept = event.request.headers.get("aceitar");
const sendAVIF = /image\/avif/.test(hdrAccept);


Você pode usar este valor para servir AVIF ou qualquer outro formato padrão.

Outra opção é usar um CDN que suporte AVIF. Se você hospedar suas imagens no Cloudflare, isto não deve ser um problema, pois eles adicionaram suporte a ele.

Se seu site estiver no WordPress, há plugins que você poderia usar que poderiam ajudá-lo a servir imagens AVIF para navegadores que o suportam e, para aqueles que não o suportam, usariam outros formatos de imagem em seu lugar.

Exemplos destes plugins incluem Shortpixel, Imagekit, Cloudinary, ImageEngine, entre outros.

Conclusão

Mais e mais formatos de imagem da próxima geração estão surgindo à medida que as empresas procuram melhorar o desempenho da web e melhorar os formatos de imagem anteriores e suas limitações.

Tanto WebP quanto AVIF são formatos do próximo gênero recomendados pelo Google para ajudar a acelerar seu site e melhorar a experiência do usuário.

No final do dia, ambos têm vantagens e desvantagens, e caberia a você, como proprietário do site e empresário, decidir qual é o formato de sua preferência que melhor serviria seu site e seus visitantes/clientes.

Quando se trata de acelerar um site enquanto ainda fornece imagens de qualidade, ambos os formatos são ótimas opções, em comparação com os formatos mais comuns como JPEG e PNG. Ambos testamos JPEG vs PNG para ver se existe um formato preferido e descobrimos que não existe nenhum, e que realmente se resume à velocidade da página. Confira nosso teste sobre isso para obter mais detalhes.

Se seu objetivo é acelerar seu site, a fim de ganhar posição, a compressão de imagem é apenas um fator a ser trabalhado e ir para WebP ou AVIF é apenas um passo em direção a isso. Esperamos que, através destes dois artigos, você tenha agora uma idéia melhor de qual formato de imagem da nova geração deve seguir.

Para mais informações e dicas sobre como otimizar suas imagens, confira nosso Otimização da imagem artigo.

Marie Aquino

EQUIPE SIA SEOESCRITOR

Marie's biografia completa aqui.