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.
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:
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
