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 é um dos principais fatores 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?
Conteúdo
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).
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 vai oferecer ambas as 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 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 permite a gravação de sequências de imagens.
Como funciona a compactação com perdas?
A compactação com perdas usando WebP utiliza o mesmo método do codec VP8, que é baseado em bloco para prever quadros, ou seja, quadros individuais. Cada quadro é, portanto, dividido em segmentos menores, também chamados de macro-blocos.
Nesses macro-blocos, 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 sem perdas do formato do Google pode usar fragmentos de imagem vistos anteriormente para reconstruir novos pixels. Isto é, 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 utilizar o formato 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, JPGE e GIF.
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.
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 imagens grandes na web. Mais de um quarto de século após sua publicação, esse formato de imagem é uma parte essencial da web.
Em relação a este ponto, 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 essas imagens supera a das imagens JPEG.
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 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. Você pode converter uma imagem WebP em programas de edição de imagens, por exemplo, ou até mesmo em sites de conversão na web!
Na área de desenvolvimento, 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 leve e 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!