Detect WEBP Support with JavaScript

By  on  

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!

Recent Features

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • By
    External Site Link Favorite Icons Using MooTools and CSS

    I recently came upon an interesting jQuery article about how you can retrieve all external links within a page, build the address of the site's favorite icon, and place the favorite icon along side the link. I've chosen a different approach which...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Discussion

  1. Nice snippet there!

    You can also utilise picture to define a series of image types and let the browser decide what to load.

  2. It doesn’t correctly detect WebP on Firefox though! :(

  3. Alex

    It is funny to use .createImageBitmap for WebP detection, method that Safari, Edge and IE — main targets for detection — doesn’t support.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!