Détection du support WebP

Question

Comment puis-je détecter la prise en charge de WebP via Javascript ? J'aimerais utiliser la détection des fonctionnalités plutôt que celle du navigateur si possible, mais je ne trouve pas de moyen de le faire. Modernizr ( www.modernizr.com ) ne le vérifie pas.

Answer 1

Je pense que quelque chose comme ça pourrait marcher :

var hasWebP = false;
(function() {
  var img = new Image();
  img.onload = function() {
    hasWebP = !!(img.height > 0 && img.width > 0);
  };
  img.onerror = function() {
    hasWebP = false;
  };
  img.src = 'http://www.gstatic.com/webp/gallery/1.webp';
})();

Dans Firefox et IE, le gestionnaire "onload" n'est pas appelé du tout si l'image ne peut pas être comprise, et le gestionnaire "onerror" est appelé à la place.

Vous n'avez pas mentionné jQuery, mais à titre d'exemple pour gérer la nature asynchrone de cette vérification, vous pourriez renvoyer un objet jQuery "Deferred" :

function hasWebP() {
  var rv = $.Deferred();
  var img = new Image();
  img.onload = function() { rv.resolve(); };
  img.onerror = function() { rv.reject(); };
  img.src = 'http://www.gstatic.com/webp/gallery/1.webp';
  return rv.promise();
}

Alors vous pourriez écrire :

hasWebP().then(function() {
  // ... code to take advantage of WebP ...
}, function() {
  // ... code to deal with the lack of WebP ...
});

Voici un exemple de jsfiddle.

---

Un vérificateur plus avancé : http://jsfiddle.net/JMzj2/29/ . Celui-ci charge les images à partir d'une URL de données et vérifie si le chargement est réussi. Étant donné que WebP prend également en charge les images sans perte, vous pouvez vérifier si le navigateur actuel prend en charge uniquement WebP avec perte ou également WebP sans perte. (Remarque : cette vérification porte aussi implicitement sur la prise en charge des URL de données).

var hasWebP = (function() {
    // some small (2x1 px) test images for each feature
    var images = {
        basic: "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==",
        lossless: "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA="
    };

    return function(feature) {
        var deferred = $.Deferred();

        $("<img>").on("load", function() {
            // the images should have these dimensions
            if(this.width === 2 && this.height === 1) {
                deferred.resolve();
            } else {
                deferred.reject();
            }
        }).on("error", function() {
            deferred.reject();
        }).attr("src", images[feature || "basic"]);

        return deferred.promise();
    }
})();

var add = function(msg) {
    $("<p>").text(msg).appendTo("#x");
};

hasWebP().then(function() {
    add("Basic WebP available");
}, function() {
    add("Basic WebP *not* available");
});

hasWebP("lossless").then(function() {
    add("Lossless WebP available");
}, function() {
    add("Lossless WebP *not* available");
});

Answer 2

C'est une vieille question, mais Modernizr prend désormais en charge la détection Webp.

http://modernizr.com/download/

Cherchez img-webp sous la rubrique Détecteurs non essentiels.

Answer 3

Voici le code sans avoir à demander une image. Mis à jour avec le nouveau fiddle de qwerty.

http://jsfiddle.net/z6kH9/

function testWebP(callback) {
    var webP = new Image();
    webP.onload = webP.onerror = function () {
        callback(webP.height == 2);
    };
    webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
};

testWebP(function(support) {
    document.body.innerHTML = support ? 'Yeah man!' : 'Nope';
});

Answer 4

WebPJS utilise une détection plus intelligente du support WebP, sans qu'aucune image externe ne soit nécessaire : http://webpjs.appspot.com/

Answer 5

J'ai trouvé la fonction de détection de support webp qui nécessite 300+ms lorsque la page est lourde en JavaScript. J'ai donc écrit un script avec des fonctions de mise en cache :

• script cachette
• cache de stockage local

Il ne sera détecté qu'une seule fois, lors du premier accès de l'utilisateur à la page.

/**
 * @fileOverview WebP Support Detect.
 * @author ChenCheng<sorrycc@gmail.com>
 */
(function() {

  if (this.WebP) return;
  this.WebP = {};

  WebP._cb = function(isSupport, _cb) {
    this.isSupport = function(cb) {
      cb(isSupport);
    };
    _cb(isSupport);
    if (window.chrome || window.opera && window.localStorage) {
      window.localStorage.setItem("webpsupport", isSupport);
    }
  };

  WebP.isSupport = function(cb) {
    if (!cb) return;
    if (!window.chrome && !window.opera) return WebP._cb(false, cb);
    if (window.localStorage && window.localStorage.getItem("webpsupport") !== null) {
      var val = window.localStorage.getItem("webpsupport");
      WebP._cb(val === "true", cb);
      return;
    }
    var img = new Image();
    img.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";
    img.onload = img.onerror = function() {
      WebP._cb(img.width === 2 && img.height === 2, cb);
    };
  };

  WebP.run = function(cb) {
    this.isSupport(function(isSupport) {
      if (isSupport) cb();
    });
  };

})();