O\u00a0WebP\u00a0\u00e9 um formato de imagem desenvolvido pelo\u00a0Google que promete reduzir o tamanho do arquivo de imagens em at\u00e9 39%. Ele usa um m\u00e9todo de compress\u00e3o leve, ou seja, que mant\u00e9m o m\u00e1ximo de qualidade vis\u00edvel, \u00a0e conseguiram chegar a uma compress\u00e3o de imagem melhor que a do formato jpg.<\/p>\n
Os pontos positivos do\u00a0WebP\u00a0s\u00e3o v\u00e1rios: O formato mant\u00e9m a qualidade das imagens e diminui o seu tamanho em at\u00e9\u00a039%, al\u00e9m de ser gr\u00e1tis, ainda da suporte a transpar\u00eancia e anima\u00e7\u00f5es, como o formato\u00a0png\u00a0e\u00a0gif,tudo isso em uma \u00fanica extens\u00e3o.<\/p>\n
\u00c9 otimiza\u00e7\u00e3o garantida no tempo de carregamento e na diminui\u00e7\u00e3o dos dados trafegados.<\/p>\n
Apesar de v\u00e1rios pontos positivos, nem tudo s\u00e3o flores. N\u00e3o s\u00e3o todos os browsers que d\u00e3o suporte ao formato\u00a0WebP.<\/p>\n
Atualmente apenas o\u00a0Google Chrome,\u00a0Opera,\u00a0Navegadores nativo do Android,\u00a0Chrome for Android\u00a0e\u00a0Opera Mobile\u00a0suportam o\u00a0WebP.<\/p>\n
Para superar esse ponto negativo \u00e9 necess\u00e1rio al\u00e9m de manter a imagem no formato original, sem ser WebP, o uso do plugin Modernizr ou equivalente.<\/p>\n
O\u00a0Modernizr\u00a0\u00e9 uma biblioteca JavaScript que tem como principal fun\u00e7\u00e3o detectar as funcionalidades do browser que est\u00e1 renderizando o site. No caso, iremos utiliza-lo para detectar se o browser do usu\u00e1rio \u00e9 compat\u00edvel ou n\u00e3o com o\u00a0WebP.<\/p>\n
Abaixo temos uma tag img padr\u00e3o:<\/p>\n
<img src=\u201drossi.jpg\u201d alt=\"rossi\" title=\"rossi\" width=\"500\" height=\"400\"><\/span><\/pre>\nAbaixo temos uma tag img de exemplo, utilizando chamadas\u00a0WebP, repare que retiramos o\u00a0srce inserimos:\u00a0data-original,\u00a0data-webp\u00a0e a classe\u00a0img-webp:<\/p>\n
<img class=\"img-webp\" data-original=\u201drossi.jpg\u201d data-webp=\u201drossi.webp\u201d alt=\"rossi\" title=\"rossi\" width=\"500\" height=\"400\"><\/span><\/pre>\nPensando em SEO, n\u00e3o se preocupe com a retirada do src. Os rob\u00f4s do Google s\u00f3 indexam as p\u00e1ginas depois do JavaScript estar totalmente renderizado.<\/em><\/p>\nO c\u00f3digo abaixo utiliza o jQuerye o Modernizr para determinar se o browser \u00e9 ou n\u00e3o compat\u00edvel com o WebP, ele utiliza como seletor a classe\u00a0img-webp\u00a0e insere no\u00a0src\u00a0o\u00a0data-original\u00a0ou\u00a0data-webpde acordo com a compatibilidade:<\/p>\n
Modernizr.on(‘webp’, function (result) {
\nif (result) {
\n$(‘.img-webp’).each(function () {
\nthis.src = $(this).data(‘webp’);
\n});
\n} else {
\n$(‘.img-webp’).each(function () {
\nthis.src = $(this).data(‘original’);
\n});
\n}
\n});<\/p>\n
Tamb\u00e9m \u00e9 poss\u00edvel utilizar o formato no\u00a0CSS, o\u00a0Modernizr\u00a0insere na tag\u00a0HTMLas classes\u00a0webp\u00a0ou\u00a0no-webp,\u00a0utilizando as classes, podemos definir por exemplo uma imagem de fundo:<\/p>\n
\u00a0 \u00a0 \u00a0 \u00a0.rossi{float: left; width: 500px; height: 400px; margin: 0 10px;}<\/p>\n
\/* Utiliza a classe webp inserida na tag html pelo Modernizr *\/
\n.webp .rossi{background: url(‘..\/image\/rossi.webp’)}<\/p>\n
\/* Utiliza a classe .no-webp inserida na tag html Modernizr *\/
\n.no-webp .rossi{background: url(‘..\/image\/rossi.jpg’)}<\/p>\n
Plugins e conversores<\/h3>\n
Existem diversos plugins\u00a0WebP\u00a0tanto para\u00a0Linux\u00a0como para\u00a0Windows.<\/p>\n
Tamb\u00e9m \u00e9 poss\u00edvel baixar plugins para abrir e salvar imagens\u00a0WebP no Photoshop.<\/p>\n