Suporte rápido para WebP – lado do cliente

Existem várias soluções para suportar WebP , lado do servidor (nginx / apache), renderização JS do WebP ou usando JS para selecionar qual imagem selecionar. Vou falar sobre as últimas.

Modernizr permite detectar se o navegador suporta WebP. Isso pode ser feito com

Modernizr.webp

Para usá-lo, você precisa obter o Modernizr com suporte WebP da Modernizer.com (lembre-se de habilitar img-webp na seção Non-Core)

Por exemplo, se a principal fonte de tráfego que você tem é o Chrome, talvez você possa especificar que, por padrão, suas imagens serão WebP e, se o navegador não as suportar, volte para a alternativa. O seguinte JS permitiria isso:

/* Default images format : webp
 * If browser supports webp, will load .webp, else load something else.
 * 
 * <img src="/images/email.png"> - Directly specify image
 * <img data-src="/images/email.png" src="/images/example.webp"> - Default is webp, 
 *   if browser does not support, load data-src
 *
 */

window.onload  = function () {
  var i, images, supportWebp;

  // Can I support webp?
  supportWebp = Modernizr.webp;

  if (!supportWebp) {
    images = document.getElementsByTagName('img');
    for(var i = 0, len = images.length; i < len; i++) {
      if (images[i].hasAttribute('data-src')) {
        images[i].src = images[i].getAttribute('data-src');
      }
    }
  };

};

O principal problema com esta solução: se o seu navegador não suportar webp, ele começará a buscar a versão webp antes que o JS mude o src para a imagem alternativa.

Como alternativa, você pode conter 2 atributos de dados data-wepb e data-src:

//<img data-webp="/images/example.webp data-src="/images/email.png">

for(var i = 0, len = images.length; i < len; i++) {
    if (images[i].hasAttribute('data-webp') && supportWebp ) {
      images[i].src = images[i].getAttribute('data-webp');
    }  
    else if (images[i].hasAttribute('data-src')) {
      images[i].src = images[i].getAttribute('data-src');
    }
  }

Com esta solução, o navegador só começará a baixar as imagens depois que a página terminar de carregar.