O Que é WebP? Um Guia para Iniciantes
access_time
hourglass_empty
person_outline

O Que é WebP? Um Guia para Iniciantes

Ter um site que carrega rapidamente talvez seja o maior sonho de todo webmaster. Uma das maneiras de otimizar a velocidade da página é usando formatos de imagem WebP. Mas o que é WebP, afinal de contas?

Trata-se de um formato que oferece imagens ricas e de alta qualidade, mas com um tamanho menor do que PNG ou JPEG. Neste artigo, você irá aprender sobre WebP, seus prós e contras, e como usar esse formato no seu site do WordPress.

O Que Exatamente é WebP?

O WebP é um formato de arquivo que foi desenvolvido pela Google lá em 2010. Ele oferece uma taxa de compressão mais alta para imagens, enquanto mantém a sua qualidade intacta.

Webmasters e desenvolvedores podem criar imagens com tamanhos de arquivos menores, para que você possa carregá-los mais rapidamente.

Este formato usa métodos de compressão mais poderoso, tanto do tipo lossy quanto do lossless, se comparado com os formatos PNG e JPEG.

Compressão sem perda (lossless) significa que cada bit dos dados originais vão se manter os mesmos depois que o arquivo é extraído. A compressão sem perdas do WebP permite reduzir o tamanho de imagens em até 26%, se comparado ao PNG.

Por outro lado, há também a compressão do tipo com perda (lossy), que geralmente reduz o tamanho do arquivo ao remover uma certa quantidade dos dados original.

Usando programação preditiva para codificar a imagem, o WebP do tipo com perda oferece uma qualidade comparável com o JPEG, enquanto reduz os tamanhos de imagem de 25% a 34%.

As Vantagens

Como notamos anteriormente, tamanhos de imagem menores podem fazer uma grande diferença no seu site – isso ajuda a página a carregar mais rapidamente.

Outro benefício é que você pode economizar mais largura de banda, especialmente se o seu site está cheio de imagens. Isso acontece, por exemplo, se você está administrando um blog de viagens ou de fotografia, entre outros temas.

Para entender melhor a diferença, vamos olhar para uma breve explicação dos formatos JPEG e PNG.

  • JPEG (ou JPG) – este formato é ótimo para imagens com muitas cores, e é a opção preferida para imagens estáticas. Contudo, geralmente existe um lado negativo: você vai perceber uma pequena perda na qualidade de imagem, por causa da compressão.
  • PNG – é excelente para manter a qualidade de imagem, mesmo quando está comprimido. Este formato geralmente se encaixa bem para imagens com muitos dados ou pixels. Por exemplo, no caso de logos, imagens cheias de textos e ilustrações. Contudo, ele não funciona muito bem com fotografias.

O WebP combina e oferece o melhor dos dois formatos. Enquanto ele proporciona um formato 25-34% menor do que o PNG ou o JPEG, ele também permite manter a qualidade da imagem.

Para ter uma ideia melhor, dê uma olhada nas imagens da galeria de WebP da Google. Como você pode ver, não dá para realmente ver uma diferença de qualidade entre as imagens em JPEG (na esquerda) e as imagens em WebP (na direita).

Quando você vai checar os arquivos, contudo, irá reparar na diferença: as imagens WebP são de 32% a 34% menores do que os JPEGs.

As Desvantagens

Dados os benefícios que esse formato de imagem tem a oferecer, é importante também mencionar algumas das suas limitações.

Primeiramente, tudo bem que alguns dos principais navegadores do mercado – incluindo Google Chrome, Firefox e Opera – já suportam o formato WebP. Contudo, o Safari e o Internet Explorer ainda não trazem suporte.

Considerando as tendências atuais, esperamos que esses navegadores irão seguir esse caminho em breve.

Outro problema para um webmaster que quer usar esse formato para o seu site é que o WordPress atualmente não suporta imagens WebP.

Isso significa que você não pode simplesmente fazer upload de arquivos WebP para a sua biblioteca de mídia do WordPress.

Porém, isso não significa que você não pode usar esse formato. Você só precisa da ajuda de um plugin para fazer isso.

Como Usar WebP no WordPress

Você pode exibir imagens em WebP no WordPres usando o WebP Express. Aqui está um tutorial sobre como instalar um plugin no WordPress.

página de download do plugin webp express para wordpress

O plugin WebP Express usa a WebP Convert Library para modificar as imagens. Esse plugin serve como um conversor que gear WebP para navegadores que suportam esse formato, mas exibe JPG ou PNG para navegadores que são suportam.

página de configurações do plugin webp express

Você também pode usar o plugin Optimole para ajudá-lo a converter as imagens para navegadores que suportam WebP. Esse plugin não apenas irá otimizar suas imagens WebP, mas também irá fornecê-las aos usuários através de uma CDN.

página de download do plugin optimole para wordpress

Como uma alternativa para os plugins, você também pode usar a Photon API para fazer a mesma coisa. Com essa API, suas imagens em JPEG e PNG serão instantaneamente convertidas para o seu formato desejado.

Contudo, tenha em mente que você só pode usar essa API para sites hospedados no WordPress.com, ou em sites do WordPress conectados com o Jetpack.

Conclusão

Agora você aprendeu sobre o formato WebP, que irá ajudar você a ter imagens de tamanho menor e de qualidade mais rica para usar no seu site.

Você provavelmente vai querer começar a usar esse formato para as suas imagens, já que isso ajuda o seu site a carregá-las muito mais rapidamente. Isso também dá muito mais espaço para a sua cota de largura de banda, especialmente se você usa muitas imagens no seu site.

Apesar das suas limitações, você sempre pode usar plugins para ajudar a converter essas imagens. Conte para a gente nos comentários se este tutorial foi útil para você!

O Autor

Author

Carlos E. / @carlosfelipe

Carlos Estrella é formado em jornalismo pela UFSC e tem as funções de redator, tradutor e SEO na Hostinger Brasil. Já trabalhou com jornalismo de games e tecnologia e hoje aplica essa experiência escrevendo posts e tutoriais no blog da Hostinger. Suas paixões incluem games, dar rolês com a namorada e amigos e ler artigos aleatórios da Wikipédia de madrugada.

Tutoriais relacionados

Deixe uma resposta

Comentar*

Nome*

Email*

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Faça parte da Hostinger agora!