Using modernizer to detect webp support in browser

Question

not sure where I'm going wrong here, but it seems straight forward. I'm trying to detect webp support.

So I have gone to the modernizer site and checked the webp options then downloaded the script.

I have added the script using wordpress functions file, and confirmed it is loading on front end.

Then after the script loads I use the following code to detect if webp is supported:

/*
*   Check webp support
*/
if (Modernizr.webp) {
    alert('webp supported');
} else {
    alert('webp not supported');
}

Alas, I get no alert message.

There is no error messages in the dev tools console either.

Anyone know whats up.

Cheers

Answer 1

Modernizr.on('webp', function (result) {
  if (result) {
    // Has WebP support
  }
  else {
    // No WebP support
  }
});