Detecting WebP support

is webp open source
webp fallback
php check if browser supports webp
modernizr webp
is webp worth it
webp content type
webp seo
webp animations

How can I detect support for WebP via Javascript? I'd like to use feature detection rather than browser detection if possible, but I can't find a way to do so. Modernizr (www.modernizr.com) doesn't check for it.


This is my solution - is taking around 6ms and I'm considering WebP is only a feature for a modern browser. Uses a different approach using canvas.toDataUrl() function instead of image as the way to detect the feature:

function canUseWebP() {
    var elem = document.createElement('canvas');

    if (!!(elem.getContext && elem.getContext('2d'))) {
        // was able or not to get WebP representation
        return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
    }

    // very old browser like IE 8, canvas not supported
    return false;
}

How to Detect Browser Support WebP - JackPu, WebP is the best image solution at Web. It is smaller than JPEG/PNG with the same quality because of VP8. En. the first method I could use is checking the user  Detect WEBP Support with JavaScript. Image optimization is a huge part of improving front-end performance. We've traditionally used JPG/JPEG, GIF, and PNG images but Google and the Chrome team developed the WEBP format which crunches file size and optimizes rendering.


I think something like this might work:

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';
})();

In Firefox and IE, the "onload" handler just won't be called at all if the image can't be understood, and the "onerror" is called instead.

You didn't mention jQuery, but as an example of how to deal with the asynchronous nature of that check you could return a jQuery "Deferred" object:

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();
}

Then you could write:

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

Here is a jsfiddle example.


A more advanced checker: http://jsfiddle.net/JMzj2/29/. This one loads images from a data URL and checks whether it loads successfully. Since WebP now also supports lossless images, you could check whether the current browser supports just lossy WebP or also lossless WebP. (Note: This implicitly also checks for data URL support.)

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");
});

Frequently Asked Questions | WebP, Image optimization is a huge part of improving front-end performance. This JavaScript code detects WebP support for Chrome. Fortunately there are several techniques for detecting WebP support, both on the client-side and server-side. Some CDN providers offer WebP support detection as part of their service. Server-side


Preferred solution in HTML5

<picture>
  <source srcset="/path/to/image.webp" type="image/webp">
  <img src="/path/to/image.jpg" alt="insert alt text here">
</picture>

Wiki on W3C

Detect WEBP Support with JavaScript, WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. For more information about this format,  WebP images with htaccess. Place the following in your .htaccess file and jpg/png images will be replaced with WebP images if found in the same folder. <IfModule mod_rewrite.c> RewriteEngine On # Check if browser support WebP images RewriteCond %{HTTP_ACCEPT} image/webp # Check if WebP replacement image exists RewriteCond %{DOCUMENT_ROOT}/$1.webp -f # Serve WebP image instead RewriteRule


This is an old question, but Modernizr now supports Webp detection.

http://modernizr.com/download/

Look for img-webp under Non-core detects.

How to detect if the Webp image format is supported in the browser , To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance  Detecting support for WebP, JPEG 2000, JPEG XR and SVG to supply the best image for the UA. Install. Download/fork the script to your server. Insert script before any <link> tag to css file, so browser will start to download right images. <html> <head> <title>My Page</title> <script src="imgsupport.js"></script>


Official way by Google:

Since some old browsers have partial support for webp, so it is better to be more specific which webp feature you are trying to use & detect this specific feature, and here is Google's official recommendation for how to detect a specific webp feature:

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, isSupported)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

// Example Usage
check_webp_feature('lossy', function (feature, isSupported) {
    if (isSupported) {
        // webp is supported, 
        // you can cache the result here if you want
    }
});

Note that image-loading is non-blocking and asynchronous. This means that any code that depends on WebP support should preferably be put in the callback function.

Also note that other synchronous solutions won't work well with Firefox 65

Detect webP support, Detect support for WEBP images in the browser in 0.3KB - https://npm.im/​supports-webp. Star 91. Watch. master. View more branches. Latest commit by fregante  Detect support for WEBP images in the browser in 0.3KB Usage with npm and ES2015 npm install --save supports-webp import supportsWebP from ' supports-webp ' ; // supportsWebP is a Promise supportsWebP. then (supported => { if (supported) { console. log (' Load WebP! ') } else { console. log (' Load JPEG!


fregante/supports-webp: Detect support for WEBP images , 1) Detect WebP support with javascript, a data-uri and onload/onerror events. 2) Set a cookie if WebP support is detected. 3) If the cookie is set,  There are ways to detect WebP images using Javascript and server-side techniques (htaccess for example), but the most robust solution is to use <picture> tag for your images in the webpage. The <picture> tag has been created for these special cases, so it is best to use this to provide the best browser support. The type tag attribute in a <source> tag specifies a file type for the source image. <picture> <source srcset="image.webp" type="image/webp"> <source srcset="image.jpg" type="image


Detecting WebP support in browsers, simple method, Modernizr is a well-known feature detection library that detects available features in browsers. WebP support just so happens to be one of those detections. Even  I want try to use images in WebP format as background images on my webpages. But I'm not sure, how make condition in CSS that if browser not support WebP format so in this case use classic jpg ima


Using WebP Images, Browser support for WebP is detected based on a simple user-agent check (​Chrome browser) and an additional JavaScript detection. If WebP is  WebP is supported in Chrome and Opera and provides better lossy and lossless compression for images on the web. See A New Image Format For The Web for more on WebP.