O formato WebP foi criado pelo Google para trazer qualidade e compressão às imagens na web. Confira mais sobre o assunto e veja como aplicá-lo em seu site.

É difícil imaginar um site sem imagens, certo? As imagens ocupam um lugar importante na web e por vários motivos! Em termos de conteúdo, por exemplo, elas permitem que você represente com sucesso a sua marca e crie mais engajamento com os usuários.

É também uma forma eficaz de criar uma atmosfera especial e tornar seu site mais atraente. Afinal, o visual conta muito! Além disso, já há algum tempo a velocidade de carregamento é uma das principais ferramentas de ajuste no contexto da otimização de sites. 

O tempo perdido ao acessar uma página é um critério de avaliação essencial tanto para os visitantes quanto para os buscadores, como o Google. Assim, códigos mais curtos e compactados ou o uso de mecanismos de cache também fazem parte das abordagens de solução testadas para uma presença online rápida.

Nesse contexto, por exemplo, o uso de imagens compactadas também é muito válido. Como elementos de design e plano de fundo, elas são incorporadas em grande quantidade em muitos projetos, e sua influência no tempo de carregamento é frequentemente subestimada.

O gigante dos mecanismos de busca, o Google, enfrentou esse problema em particular. Por isso, em 2010, apresentou o WebP, seu próprio formato de imagem livre de royalties para sites mais rápidos. 

Mas o que exatamente é esse formato da web que nasceu do codec de vídeo VP8? E como isso funciona em comparação com formatos estabelecidos como JPEG?

WebP: o que é?

Em 30 de setembro de 2010, o Google anunciou o lançamento de um novo padrão de código aberto para compactação com perdas de imagens de 24 bits na web.  Nesse mesmo ano, adquiriu a On2 Technologies, empresa por trás do formato de vídeo VP8, que serviu de modelo para o novo formato WebP. 

Posteriormente, o Google complementou o formato WebP com recursos como modo de compressão sem perdas, transparência (canal alfa) e animações.  Este formato de compressão é suportado pelo Chrome desde o final de 2010, mas também pelo Opera. 

Esses dois navegadores são, portanto, opostos a uma infinidade de outros navegadores que, até agora, só suportam WebP em uma base experimental (como Safari e Firefox, cujas versões regulares não oferecem suporte). 

Todo o software para processamento e apresentação do WebP está disponível por padrão sob a licença BSD. O Google usa o formato, por exemplo, na Chrome Web Store e nos aplicativos móveis do Google +.

Quais vantagens o formato WebP oferece?

Desde o início, o objetivo do formato WebP tem sido reduzir as imagens ao menor tamanho de arquivo possível na web. De acordo com o Google, imagens e gráficos em formato WebP são aproximadamente 30% menores do que arquivos PNG ou JPEG com a mesma qualidade de imagem. 

Enquanto esses dois formatos da web clássicos dependem de métodos de compressão diferentes (PNG sem perdas, JPEG com perdas), o formato WebP oferece as duas possibilidades. 

Essa flexibilidade torna o formato adequado para fotos e pequenas imagens e gráficos. As características de compressão, bem como outras propriedades centrais do formato WebP podem ser resumidas da seguinte forma:

  • Compactação (com perdas): a compactação com perdas usando o formato WebP é baseada na codificação do quadro-chave do VP8.
  • Compactação (sem perdas): a compactação sem perdas usando WebP depende de várias técnicas que transformam os parâmetros e dados da imagem. 
  • Transparência: o formato WebP oferece um canal alfa de 8 bits que também pode ser usado na compactação RGB com perdas.
  • Metadados: o formato WebP pode conter metadados EXIF ​​e XMP que normalmente são gerados por câmeras.
  • Perfil de cores: o formato do Google pode conter perfis ICC incorporados (um conjunto de dados que descreve o espaço de cores).
  • Animações: o formato WebP permite a gravação de sequências de imagens.

Como funciona a compactação WebP com perdas?

A compactação com perdas usando WebP usa o mesmo método que o codec VP8 baseado em bloco para prever quadros, ou seja, quadros individuais. Cada quadro é, portanto, dividido em segmentos menores, também chamados de macroblocos. Nestes macroblocos, o codificador pode prever movimento redundante e informação de cor e subtraí-la do bloco. 

O resultado dessa compressão preditiva consiste nas informações de bloco restantes e nas informações redundantes separadas (normalmente contendo muitos valores zero). 

Como funciona a compactação sem perdas usando WebP

No caso de compactação WebP sem perdas, a primeira etapa é transformar a imagem. As seguintes técnicas podem ser usadas em particular dentro da estrutura desta transformação:

  • Transformação baseada em previsões espaciais: o WebP usa 13 modos de predição diferentes que tiram vantagem do fato de que pixels vizinhos frequentemente se correlacionam uns com os outros. O valor atual do pixel é, portanto, previsto a partir de pixels já decodificados e apenas o valor residual é codificado.
  • Transformação de cor: o objetivo da transformação de cores é descorrelacionar os valores RGB de cada pixel individual. Para isso, a imagem é dividida em blocos antes que o vermelho (R) seja transformado na base do verde (G) e o azul (B) na base do verde e do vermelho. O valor verde é mantido.
  • Transformação por subtração de verde: além da transformação geral da cor, é possível usar uma variante em que o valor do verde é subtraído dos valores do vermelho e do azul para cada pixel.
  • Transformação baseada na indexação de cores: se poucos valores de pixel definidos estiverem disponíveis, o formato WebP também oferece a possibilidade de uma transformação com base na indexação de cores. 
  • Codificação de um cache de cores: a compressão WebP sem perdas pode usar fragmentos de imagem vistos anteriormente para reconstruir novos pixels. Se nenhum fragmento adequado estiver disponível para este propósito, um cache de cores local com as últimas 32 cores usadas serve como ponto de partida. 

Como usar o WebP no WordPress?

Um grande obstáculo ao uso do WebP é que ele não é compatível com o WordPress, que ainda é o CMS mais usado no mundo. Este suporta os formatos de imagem mais comuns, como PNG, JEPG, ICO e GIF. No entanto, ainda não integrou o formato WebP.

Por esse motivo, se você tentar fazer upload de uma imagem WebP para sua biblioteca de mídia do WordPress, o CMS exibirá uma mensagem de erro. Felizmente, as soluções já estão disponíveis para usuários do WordPress que desejam usar o formato WebP para otimizar o desempenho de seu site. 

Para todo problema, há uma solução possível. Uma delas é o uso de um plug-in. Existem plug-ins gratuitos, como o plug-in WebP Express, que permitem usar imagens no formato WebP em navegadores de Internet que não as suportam. 

Além disso, eles também continuam a oferecer imagens em formatos padrão de outros navegadores (como o Safari). Este recurso é compatível com todas as imagens do site, incluindo temas, galerias e biblioteca de mídia.

Erro de configuração do servidor

Caso você opte por usar o formato de imagem WebP em seu site, é importante lembrar que esse formato não é compatível com servidores compartilhados (planos P, M, Turbo, Plus) e revendas da HostGator. Em razão disso, ao tentar fazer o upload de uma imagem WebP para sua biblioteca de mídia, aparecerá uma mensagem de erro:

Erro de configuração do servidor
Mensagem de erro de configuração do servidor

Vale ressaltar que o formato de imagem Webp é compatível com os servidores VPS e Dedicados da HostGator.

WebP para GIFs

Com suporte para imagens em movimento, o WebP é uma alternativa atraente para os formatos GIF ou APNG. Ele tem vantagens como profundidade de cor de 24 bits e canal alfa de 8 bits, além de alta taxa de compactação. Ao contrário dos formatos concorrentes, o formato WebP também permite compressão de animação sem perdas e com perdas. 

O WebP animado também se sai bem em termos de decodificação: como registra metadados se cada quadro contém ou não valores alfas, o decodificador não precisa converter individualmente para obter essas informações.

WebP vs JPEG

Se o Google é líder na indústria de mecanismos de busca, JPEG ou JPG é, sem dúvida, o líder quando se trata de visualização de fotos e imagens grandes na World Wide Web. Mais de um quarto de século após sua publicação, esse formato de imagem é uma parte essencial da web. 

Sua principal vantagem sobre formatos como PNG, que também é comum, mas principalmente usado para imagens e ilustrações menores, como logotipos, ícones, etc., é, sem dúvida, que o JPEG economiza espaço. Unidade de disco considerável por meio de compactação com perdas.

Em relação a este ponto decisivo, no entanto, o WebP mostra-se ainda mais eficiente e flexível: por um lado, o formato Google oferece um método de compressão com e sem perdas. 

Por outro lado, a economia de espaço em disco para imagens no formato WebP supera a das imagens JPEG. 

As vantagens vistas na comparação de WebP sobre JPEG também são encontradas na comparação de WebP sobre GIF, onde o formato do Google também oferece vantagens atraentes em termos de qualidade e compressão. 

O problema com o WebP, entretanto, é que ele não é compatível com navegadores como Firefox ou Microsoft Edge. Até agora, os usuários desses navegadores não visualizam imagens e animações no formato WebP, razão pela qual poucos operadores de sites hoje optam por esse formato.

Como abrir e converter arquivos WebP?

Atualmente, os arquivos no formato WebP não podem ser abertos com visualizadores de imagens tradicionais do Windows, Linux e macOS. No entanto, se você deseja visualizar animações ou imagens codificadas com WebP, existem várias possibilidades disponíveis!

Se você tiver o Chrome ou Opera instalado em seu sistema, pode facilmente arrastar e soltar o arquivo afetado em uma janela aberta de qualquer um desses dois navegadores. Como eles oferecem suporte nativo ao WebP, você poderá visualizar o conteúdo sem a necessidade de qualquer outro software. 

No entanto, essa solução não é a mais confortável, especialmente quando você deseja visualizar várias imagens ou animações. 

Na área de desenvolvedor WebP, o Google também oferece uma gama completa de soluções limpas para trabalhar com WebP – vale destacar a biblioteca libwebp, que você pode usar para implementar a codificação e decodificação WebP em seus próprios programas.

Até o momento, o WebP é o único formato que permite obter imagens leves com qualidade ideal. Por isso é tão importante considerá-lo. Esperamos que este conteúdo tenha ajudado a esclarecer suas dúvidas!

Continue acompanhando o blog da HostGator para mais conteúdos sobre tecnologia, negócios e marketing!