Imagens WebP: entenda o que é e como usar

Não é de hoje que muitos desenvolvedores buscam otimização no tempo de carregamento de suas páginas, não basta um layout bonito e um bom conteúdo, se o seu site é lento é bem provável que o seu cliente acabará no site do concorrente.

O tempo de carregamento das páginas influencia diretamente a taxa de conversão dos sites. Segundo estudo realizado pela Amazon a cada 1 segundo de atraso as taxas de conversões caem em torno de 7%.

Buscando essa otimização, surgiu o desafio onde trabalho de diminuir o tempo de carregamento das páginas, após algumas pesquisas acabei descobrindo o WebP.

O que é o formato WebP?

O WebP(pronuncia-se Weppy) é um formato de imagem desenvolvido pelo Google que promete reduzir o tamanho do arquivo de imagens em até 39%.

Ele usa um método de compressão leve, ou seja, que mantém o máximo de qualidade visível.

O WebP foi descoberto “por um acaso” quando os engenheiros do Google estavam trabalhando em um CODEC de vídeo(VP8) e conseguiram chegar a uma compressão de imagem melhor que a do formato jpg.

Em resumo, a intenção do novo formato de compressão é a criação de imagens melhores, com tamanhos menores.

Cases

Muitas empresas já estão usando o WebP e conseguindo bons resultados.

O Google divulgou dados animadores após adotar o WebP em alguns de seus produtos: o Youtube ficou 10% mais rápido, o Chrome App Store reduziu o tempo de carregamento em quase 1/3 e o Google Plus teve uma economia de 50TB de dados por dia.

Outras grandes empresas como o Facebook, Mercado Livre, Netflix e Ebay também começaram a apostar no novo formato e passaram a usar em determinadas partes de seus sites e em seus dispositivos móveis.

O Mercado Livre utiliza o formato WebP nas imagens principais dos produtos.

Pontos positivos

Os pontos positivos do WebP são vários: O formato mantém a qualidade das imagens e diminui o seu tamanho em até 39%, além de ser grátis, ainda da suporte a transparência e animações, como o formato png e gif, tudo isso em uma única extensão.

É otimização garantida no tempo de carregamento e na diminuição dos dados trafegados.

Pontos negativos

Apesar de vários pontos positivos, nem tudo são flores. Não são todos os browsers que dão suporte ao formato WebP.

Atualmente apenas o Google Chrome, Opera, Navegadores nativo do Android, Chrome for Android e Opera Mobile suportam o WebP.

Para superar esse ponto negativo é necessário além de manter a imagem no formato original, sem ser WebP, o uso do plugin Modernizr ou equivalente.

Implementando

Para usar o WebP nas páginas é necessário primeiramente implementar o Modernizr.

O Modernizr é uma biblioteca JavaScript que tem como principal função detectar as funcionalidades do browser que está renderizando o site. No caso, iremos utiliza-lo para detectar se o browser do usuário é compatível ou não com o WebP.

Abaixo temos uma tag img padrão:

<img src=”rossi.jpg” alt="rossi" title="rossi" width="500" height="400">

Abaixo temos uma tag img de exemplo, utilizando chamadas WebP, repare que retiramos o src e inserimos: data-original, data-webp e a classe img-webp:

<img class="img-webp" data-original=”rossi.jpg” data-webp=”rossi.webp” alt="rossi" title="rossi" width="500" height="400">

Pensando em SEO, não se preocupe com a retirada do src. Os robôs do Google só indexam as páginas depois do JavaScript estar totalmente renderizado.

O código abaixo utiliza o jQuery e o Modernizr para determinar se o browser é ou não compatível com o WebP, ele utiliza como seletor a classe img-webp e insere no src o data-original ou data-webp de acordo com a compatibilidade:

Também é possível utilizar o formato no CSS, o Modernizr insere na tag HTML as classes webp ou no-webp, utilizando as classes, podemos definir por exemplo uma imagem de fundo:

Exemplo de duas imagens com formatos diferentes: o jpg com 82,3 kB e o webp com 38,9 kB.

Plugins e conversores

Existem diversos plugins WebP tanto para Linux como para Windows.

Também é possível baixar plugins para abrir e salvar imagens WebP no Photoshop.

Conversor online de WebP que recomendo: https://webp-converter.com/

O Futuro do WebP

É bem provável que vejamos suporte generalizado ao WebP num futuro
próximo, a Apple está testando o formato em novas versões do Safari e
os desenvolvedores do Firefox também estão trabalhando para que o
browser dê suporte ao formato.

Os arquivos do estudo estão no GitHub: https://github.com/lucasrenod/imagens-webp

Atualização 20/08/2019

O Estudo ainda é valido, mas hoje em dia existem diversas abordagens diferentes e melhores, como por exemplo plugins nodejs caso você use node para servir sua aplicação, ou até mesmo na borda usando uma CDN.

Exemplo: https://www.npmjs.com/package/imagemin-webp

Atualização 21/05/2020

Aumentou bastante o número de browsers compatíveis com webp. Segundo o site caniuse, o formato agora também é compatível nos seguintes browsers: Firefox, Edge, Samsung Internet, QQ Browser e Baidu Browser.

Confira no link: https://caniuse.com/#search=webp

Engenheiro de Software Front End