Nerus
Dooca
Alternativa Sistemas
Jet
Tray
F1 Commerce
APAGE

Aqui na E-Com Plus sabemos da importância da velocidade do site para melhorar a experiência do usuário, indexação em motores de busca e valor pago em campanhas e por isso estamos sempre atentos a formas de melhorar a velocidade das lojas.

Imagens tendem a ser arquivos que pesam sites quando a solução tecnológica não toma os devidos cuidados. Não adianta também utilizar imagens de última geração sem tomar o cuidado para que isso não afete a usabilidade. Se tem uma loja virtual ou é uma agência de implementação e quer ter sempre o que há de melhor em tecnologia.

Veja o impacto no carregamento de acordo com o Google Lighthouse de uma loja que não utiliza imagens de última geração e em excesso:

Agora olhe o teste que fizemos comparando uma foto de produto de 1200 px x 1200 px de 4 formas diferentes e logo abaixo a percentagem de redução no tamanho do arquivo:

  1. 1 – JPG – Imagem original ;
  2. 2 – JPG comprimida no tinypng.com – 50,10% de redução
  3. 3 – Webp – 59,67% de redução
  4. 4 – AVIF – 88,60% de redução

Aqui na E-Com Plus já usamos essa tecnologia com nossos clientes e os resultados são impressionantes. Nesse artigo vamos falar um pouco mais sobre esse formato de imagem de última geração.

Você deve conhecer os formatos de imagem mais populares e utilizados na atualidade: JPG, PNG e WebP, mas você conhece o novo formato, mais leve e com mais qualidade, desenvolvido nos últimos anos? O AVIF.

Dentre os formatos de imagem mais comuns nas páginas e sites da web, o JPG é o mais utilizado e foi lançado para uso 20 anos atrás. Com tantas atualizações no mundo virtual, estava mais do que na hora de termos uma opção mais leve e rápida de carregar. Essa opção é o AVIF, usado pela primeira vez em 2018, pela Netflix.

Entusiastas e especialistas acreditam que, devido as suas vantagens de utilização, esse novo formato pode ser o futuro da web e o substituto do JPG.

Nesse artigo, vamos falar mais sobre o novo formato AVIF, mostrando quais são as principais diferenças entre ele e o JPG e também as vantagens de sua utilização.

O que é o formato AVIF?

O AV1 Image File Format, mais conhecido como AVIF, é um novo formato de imagem supercomprimida e mais flexível que permite a redução do tamanho da imagem sem perda de qualidade. Ou seja, com o formato AVIF é possível comprimir imagens em tamanhos ainda menores, mas mantendo a mesma qualidade que teriam no formato JPG ou WebP.

Esse novo formato foi desenvolvido pela Alliance for Open Media (AOMedia) a partir de um codec de vídeo. Nesse formato, as imagens são compactadas com algoritmos AV1 e armazenadas em formato contêiner HEIF, e é esse aspecto que permite os melhores resultados com relação a qualidade da imagem.

Grandes empresas fazem parte da AOMedia e estão  envolvidas na criação  do AVIF, sendo algumas delas: Amazon, Google, Apple, Intel, Samsung, Microsoft, Mozilla, Facebook e outras. Por conta disso, a perspectiva é que a implementação desse novo formato de imagem nas plataformas de navegação será  muito mais rápida.

Além disso, o propósito do desenvolvimento do AVIF é  exatamente  o  de reduzir o tamanho e peso das imagens que são utilizadas na web (em sites e páginas) para que, dessa forma, haja economia de banda e maior rapidez no carregamento da página como um todo.

De acordo com especialistas, o formato AVIF pode proporcionar imagens até 50% menores que o formato JPG e 20% menores que o formato WebP, ou seja, podem ficar ainda mais compactas, mas mantendo a mesma, se não maior, qualidade da imagem. Esses fatores fazem esse formato de imagem promissor como o melhor em termos de compressão e qualidade.

As primeiras imagens em formato AVIF foram utilizadas pela Netflix em 2018, antes mesmo da versão final do formato estar totalmente pronta e disponível para uso. Esse formato de imagem traria vantagens inimagináveis para a plataforma, já que ela trabalha justamente com a exposição  de filmes e séries, que podem ser abertos em diversos tamanhos e resoluções a depender do dispositivo utilizado pelo usuário, e, como mencionado anteriormente, quanto menor o tamanho da imagem maior é a velocidade de carregamento.

Nesse artigo postado no blog de tecnologia da Netflix, é possível constatar que a plataforma já considera esse novo formato de imagem superior aos outros (JPG e WebP).

Esse artigo também traz especificações técnicas e exemplos visuais de imagens em JPG e AVIF, comparando suas qualidades com as fotos não comprimidas, vale a pena conferir se você quiser se aprofundar no assunto e essa for a sua área de interesse.

Formato AVIF x Formato JPG

Como mencionado anteriormente, o formato de imagem JPG é o mais utilizado atualmente por sites e páginas na internet. Entretanto, com a chegada do AVIF e devido as suas grandes vantagens, acredita-se que aos poucos o JPG será substituído por esse novo formato.

Existem várias diferenças marcantes entre os formatos de imagem AVIF e JPG, abaixo listamos para você as principais diferenças entre eles:

  • Tamanho dos arquivos. Imagens em formato AVIF podem ser até 50% menores do que as em JPG.
  • Flexibilidade. O formato AVIF é mais flexível do que o JPG, no sentido que suporta qualquer tipo de imagem, até mesmo aquelas com canal alfa (transparência) e imagens animadas (GIF).
  • Suporte de cores. O AVIF possui profundidade de até 12 bits de cor, enquanto o formato JPG possui profundidade de apenas 8 bits.
  • Decodificação e codificação da imagem. Talvez esse seja o único ponto onde é possível destacar uma vantagem do JPG, uma vez que a decodificação e codificação de imagens em formato AVIF é mais demorado.
  • Carregamento de Imagens. Enquanto o formato JPG carrega as imagens por renderização em múltiplas fases, o AVIF carrega a imagem completa.

Vantagens do formato AVIF

O formato AVIF foi desenvolvido para utilização na web, visando atingir uma economia de banda e consequentemente mais rapidez no carregamento de páginas. Tendo isso em vista, pode-se destacar várias vantagens da utilização desse formato de imagem.

A primeira vantagem do formato AVIF é, com certeza, o fato de que ele permite uma compactação melhor das imagens se comparado aos outros formatos. Sendo assim, devido à redução do tamanho das imagens, menor também será o armazenamento e uso de dados em páginas que usam imagens nesse formato .

Entusiastas afirmam que ao trocar todas as imagens JPG de um site para AVIF  o consumo de dados dessa página, pode ser reduzido até a metade do original.

Dessa forma, outra vantagem seria que, ao utilizar o formato AVIF, é possível melhorar e tornar mais rápido o carregamento de páginas e sites, proporcionando uma melhor experiência para o usuário e cliente dentro do site.

Um ponto importante que precisa ser destacado sobre isso, é que melhorando a experiência e tempo do usuário dentro do site, melhor também será o destaque desse site para o SEO (Search Engine Optimization), uma vez que ele irá compreender que o site proporciona uma experiencia realmente relevante ao usuário.

O terceiro ponto de vantagem é o fato de que o AVIF suporta HDR e uma ampla gama de cores, sendo que a sua profundidade de cor pode chegar até  12 bits (50% a mais do que os outros formatos, que chegam apenas até 8 bits). Isso oferece mais profundidade de cor e brilho para as imagens, permitindo que elas sejam mais ricas em detalhes, se assemelhando, dependendo da resolução e configurações escolhidas na compactação, à imagem original.

Outra vantagem da utilização do AVIF é que, diferente do formato JPG, que carrega as imagens na web por renderização em múltiplas fases apresentando assim uma pré–visualização antes da imagem final, o AVIF carrega a imagem completamente.

A quinta vantagem na utilização do AVIF é que ele suporta qualquer codec de imagem, ou seja, é possível fazer o armazenamento de imagens animadas (GIFs) e permite o uso de canal alfa (fundo transparente, assim como o formato PNG).

Mais uma vantagem do AVIF é que ele permite que imagens grandes e pesadas sejam supercomprimidas com ou sem a perda de qualidade. Esse fator vai depender das configurações utilizadas na conversão da imagem para AVIF. O que os difere é o tamanho final do arquivo. Mas, ainda que optando por uma opção mais leve, a resolução ainda é melhor do que arquivos muito mais pesados do seu concorrente JPG.

Por fim, outra característica positiva do AVIF é que seu formato é open-source, ou seja, ele possui um código-fonte aberto e sem taxas de licenciamento. O que torna possível realizar a compactação e decodificação de imagens de forma livre sem o pagamento de royalties.

Um dos objetivos da AOMedia ao criar esse formato de imagem é promover uma entrega de multimídia vantajosa e acessível, diferente do JPEG XR, que apesar de promissor exige a aquisição de licenciamento para uso.

As inúmeras vantagens e a isenção de Royalties prometem uma ascensão rápida desse novo formato de imagem. Além disso, sua implementação conta com o apoio das grandes empresas por trás da AOMedia e seus parceiros.

Como comprimir imagens em formato AVIF

Apesar de ser relativamente novo, já é possível  realizar a compreensão da imagem em formato AVIF em aplicativos e sites diretamente na web. Com a popularização desse novo formato, é provável que haverá cada vez mais formas de fazer essa compactação.

É importante ressaltar que por ser uma criação open-source, utilizar o AVIF é e sempre será gratuito, inclusive as ferramentas para comprimir as imagens em seu formato.

Abaixo seguem alguns sites já disponíveis para fazer  a conversão de imagens do formato JPG para AVIF:

  • CDKM Realiza a conversão de JPG para AVIF on-line.
  • Convertio Realiza a conversão de JPG para AVIF e vice-versa on-line.
  • Aconvert . Realiza a conversão de JPG para AVIF on-line.
  • Squosh Possui diversas opções avançadas e permite a compactação da imagem para AVIF.
  • Biblioteca oficial da AOMedia. Nessa quinta opção o ideal é que você já tenha conhecimento e se sinta confortável com a utilização da linha de comando.

Onde é possível visualizar imagens em AVIF

O formato de imagem AVIF já é compatível com o navegador Google Chrome desde agosto de 2020 (Chrome 85), sem a necessidade de extensões e configurações. É apenas necessário garantir que o seu navegador está atualizado.

Já no navegador Firefox, os usuários precisam acessar as configurações avançadas e altera-las para possibilitar a visualização de imagens AVIF.

É importante destacar que o formato de imagem AVIF ainda é muito recente, por isso, nem todos os navegadores possuem suporte e compatibilidade com ele. Essa é uma atualização que pode demorar ainda algum tempo para acontecer  em todas as plataformas da internet.

Como grandes empresas estão envolvidas no desenvolvimento do AVIF, acredita-se que certamente o desenvolvimento de atualizações de suporte para ele em praticamente todas as plataformas será mais rápido do que as atualizações feitas para os outros formatos.

Conclusão

Com esse novo formato de imagem AVIF, é possível comprimir as imagens em um tamanho muito menor e com muito mais  qualidade – com pouquíssima perda de definição –  do que é possível com os outros formatos pelo menos 20 anos mais antigos.

Muitos entusiastas e especialistas acreditam que o formato AVIF de imagem é o futuro da web e será utilizado em todos os sites e plataformas que pretendem melhorar suas experiências de uso para o usuário. É possível que em alguns anos o formato JPG, PNG e WebP deixem de ser usados nos grandes meios e passem a ser considerados ultrapassados.

Além disso, ao utilizar o AVIF em sites e páginas haverá um aumento na velocidade de carregamento, tendência cada vez mais valorizada no meio digital, que consequentemente tornará a experiência de consumo ainda melhor para usuários e clientes.

Entretanto, é preciso ressaltar que esse formato de imagem, por enquanto, não possui suporte em todas as plataformas e navegadores. Por isso, antes de converter todas as imagens do seu site para AVIF, será importante entender como tornar as imagens visíveis para todos os navegadores.

Aqui na E-Com Plus usamos imagens de próxima geração, mas mantemos uma versão da imagem em formato aceito por todos navegadores e dispositivos. Por padrão nosso Storefront entrega para navegadores e crawlers de motores de busca a imagem mais otimizada possível, quando detecta que o formato de imagem de última geração não é compatível com o  dispositivo de acesso é entregue a versão em PNG ou JPG.

Por fim, tenha em mente que uma atualização e conversão de imagens será necessária em um futuro não muito distante. Esteja preparado e aproveite o momento para adquirir uma vantagem competitiva em relação aos seus concorrentes.

E aí? O que achou do conteúdo do nosso artigo de hoje? Deixe o seu comentário.

Já esta ansioso para começar a utilizar imagens em formato AVIF assim como a nossa equipe?

Acompanhe o nosso blog para mais conteúdos relacionados à tecnologia e vendas on-line.

Sobre o autor:

Sou Vitor Rocha Gonçalves, co-fundador da E-Com Plus. Gosto de escutar música, jogar futebol e cozinhar.

Sobre a E-Com Plus:

A E-Com Plus é uma plataforma de headless commerce focada em performance e experiência para quem compra, para quem vende e também para quem desenvolve. Estamos sempre atualizados com o que há de mais moderno com relação a e-commerce e desenvolvimento web. Resumindo, queremos fazer nossos lojistas e parceiros venderem mais.

Escreveu um Comentário

treze + cinco =