Posted By

cerxx on 12/13/18


Tagged

js-hacks


Versions (?)

DETECTING WEBP SUPPORT


 / Published in: JavaScript
 

URL: https://queryj.wordpress.com/2012/06/11/detecting-webp-support/

If you are loading images on the fly, it may be worthwhile detecting support for Google’s webP format. It offers size reduction of 30 – 40% over png and jpeg without loss in quality. You can use lossless or lossy compression too.

  1. function testWepP(callback) {
  2. var webP = new Image();
  3. webP.src = 'data:image/webp;base64,UklGRi4AAABXRUJQVlA4TCEAAAAvAUAAEB8wAiMw' +
  4. 'AgSSNtse/cXjxyCCmrYNWPwmHRH9jwMA';
  5. webP.onload = webP.onerror = function () {
  6. callback(webP.height === 2);
  7. };
  8. }
  9.  
  10. testWepP(function(supported) {
  11. console.log((supported) ? "webP 0.2.0 supported!" : "webP not supported.");
  12. if(supported){
  13. $('html').addClass('webp');
  14. } else {
  15. $('html').addClass('no-webp');
  16. }
  17. });

Report this snippet  

You need to login to post a comment.