O que é WEBP e como ele pode melhorar o desempenho do seu site

Tente imaginar a internet sem imagens, somente com palavras e textos para todos os lados. Seria bem cansativo e pouco ilustrativo, não acha? A parte visual tem extrema importância na internet, sobretudo em um site. Um layout sem imagens não teria o mesmo engajamento, uma vez que esse tipo de conteúdo também é bastante expressivo — afinal, as imagens dão mais vida ao seu site. 

Pensando nisso e em criar um formato mais leve, otimizado e que possa melhorar a velocidade de carregamento das páginas na internet foi criado o WebP. Existem diversos formatos de imagem disponíveis na web e os mais conhecidos são o PNG, JPEG, GIF e outros. 

Se você tem um site, provavelmente utiliza imagens nesses formatos, certo? Entretanto, é possível aplicar imagens mais leves que ajudam a otimizar suas páginas na internet, que é exatamente o formato WebP.

Ficou com curiosidade para entender o que é e como funciona esse formato para otimizar seu site? Neste post você vai entender tudo sobre o assunto!

Afinal, o que é exatamente WebP?

Em 2010, precisamente no dia 30 de setembro, houve o anúncio do Google. Nessa data, o maior buscador do mundo lançou um novo padrão de código aberto que possibilitava a compactação de imagens de 24 bits na web. 

Depois disso, também aconteceu um complemento do formato com outros recursos, entre eles a realização da compactação sem perda, animações e transparência (canal alfa). O Chrome, navegador do Google, e o Opera já suportam o formato de compressão desde o final de 2010. Com o tempo, outros navegadores passaram a atender o formato também, porém, somente de uma forma experimental. 

A popularização da internet no país foi um processo lento, em que as conexões eram feitas com o uso de modens de 14K. Portanto, era bem difícil abrir páginas que continham muitas imagens devido a lentidão no carregamento. 

Décadas depois, muitos servidores ainda percebem como conteúdos compostos de muitas imagens ainda exigem bastante e deixam a rede um pouco mais lenta.

A solução seria usar imagens mais leves que permitissem o carregamento mais veloz — mas, claro, sem perder a qualidade. O JPEG, atual formato mais usado, foi uma boa alternativa para diminuir o tamanho dos arquivos. Por outro lado, a qualidade também era perdida.

Assim, o Google percebeu que a demora e travamentos estavam ligados ao carregamento de imagens. Então, a solução foi lançar a sua própria solução: o formato WebP.

Baixar ebook

Obrigado!

Como o WebP funciona?

De maneira bem simplificada, o WebP usa codificação preditiva e faz codificação de uma imagem por meio da compressão. Ao codificar a imagem, são usados blocos vizinhos para prever os valores de um outro bloco e, assim, criar novos pixels. O resultado é a reconstrução da imagem com melhor qualidade, porém o tamanho é menor. 

Quais técnicas são usadas para fazer a compactação sem perdas usando WebP?

A primeira da compactação sem perdas é transformar a imagem. Nesse sentido, existem diferentes técnicas que podem ser aplicadas dentro da estrutura, entre elas estão:

• Transformação de cor: descorrelaciona valores RGB dos pixels individualmente e divide a imagem em blocos, fazendo com que o vermelho vire base do verde e o azul se transforma na base do vermelho e do verde, onde o valor verde é mantido;
• Transformação baseada na indexação de cores: caso tenha poucos valores de pixel definidos, é possível transformar o formato WebP baseado na indexação das cores;
• Transformação por subtração de verde: usa-se uma variante em que os valores de vermelho e azul podem ser subtraídos para cada pixel;
• Transformação baseada em previsões espaciais: o formato WebP pode usar 13 modos de predição que utilizam pixels vizinhos para formar a imagem, em que os valores atuais de cada pixel é previsto; 
• Codificação de um cache de cores: são usados fragmentos de imagem que foram visualizadas anteriormente e armazenadas no cache para reconstruir novos pixels.

Quais as vantagens de usar esse formato de imagem?

O Google diz que sua criação é até 30% menor em comparação com outros tipos de arquivos, como JPEG e PNG — mas a vantagem é que não há perda da qualidade das imagens.

Sendo assim, veja outras vantagens de utilizar o formato WebP no seu site.

• Flexibilidade: é possível adequar o formato para pequenas imagens, gráficos e fotos
• Compactação com perdas: se baseia na compactação com codificação do quadro-chave do VP8
• Compactação sem perdas: são técnicas que mudam parâmetros e dados da imagem para manter a qualidade
• Transparência: o formato WebP também tem um canal alfa de 8 bits que faz a compactação RGB com perdas
• Perfil de cores: as imagens WebP podem ter perfis ICC incorporados, que consiste em um conjunto de dados capaz de descrever o espaço de cores para formar a imagem
• Animações: grava sequências de imagens, como nos GIFs
• Metadados: esse tipo de imagem pode ter metadados XMP e EXIF, que são normalmente usam câmeras para serem gerados

Como converter imagens em WebP para seu site?

Esse formato de imagens pode ser utilizado em diferentes sites, inclusive no WordPress — apesar do WebP não ser compatível com o CMS mais conhecido do mundo. A solução é usar um plugin, como o WebP Express.

Além dessa possibilidade, também é possível fazer o download direto de imagens nesse formato, desde que você seja um usuário do Google Chrome e o tenha como navegador padrão. 

Outra alternativa é apenas arrastar uma imagem sobre uma janela do Chrome para que ela seja aberta. Os navegadores que são baseados no Chromium também conseguem suportar o formato, apesar de algumas versões mais antigas não suportarem mais. Além dessas opções, você consegue transformar o arquivo no PhotoShop.

O formato WebP é especial porque você consegue imagens de tamanho menor, mas não perde a qualidade. Essa sacada do Google foi incrível para melhorar a experiência dos usuários enquanto navegam na internet. Por isso, que tal começar a adotá-lo em seu site?

Veja nosso post sobre design responsivo e entenda mais sobre o que estou falando!