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
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    PHP Woot Checker – Tech, Wine, and Shirt Woot

    If you haven't heard of Woot.com, you've been living under a rock. For those who have been under the proverbial rock, here's the plot: Every day, Woot sells one product. Once the item is sold out, no more items are available for purchase. You don't know how many...

  • By
    MooTools PulseFade Plugin

    I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery. The MooTools JavaScript Options of the class include: min: (defaults to .5) the...

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!