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.  If you go to a site like GIPHY in Chrome you'll be served a WEBP, but if you go to the same page in Firefox you'll be served a GIF.  Since GIPHY lazy loads its images, GIPHY has the opportunity to use WEBP feature detection with JavaScript.

Googler and Service Worker pioneer Jake Archibald recently tweeted a snippet showing how you can use a service worker to detect WEBP support:

async function supportsWebp() {
  if (!self.createImageBitmap) return false;
  
  const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
  const blob = await fetch(webpData).then(r => r.blob());
  return createImageBitmap(blob).then(() => true, () => false);
}

(async () => {
  if(await supportsWebp()) {
    console.log('does support');
  }
  else {
    console.log('does not support');
  }
})();

Jake fetches a valid WEBP data URI to determine if the browser supports WEBP -- genius!  His script also uses async / await to handle promises which I will be covering soon on this blog.  Note that this code works outside a service worker, so you can use it anywhere within your own projects.

If your site is heavy on imagery, consider formatting your images with WEBP; Chrome's market share is so large that it will definitely be worth it.  If you like small tips like this, be sure to follow Jake on Twitter!