Detekce podpory WEBP pomocí JavaScriptu

Optimalizace obrazu je obrovskou součástí zlepšování výkonu front-endu. Tradičně jsme používali obrázky JPG/JPEG, GIF a PNG, ale Google a tým Chrome vyvinuli formát WEBP, který zmenšuje velikost souboru a optimalizuje vykreslování. Pokud přejdete na web jako GIPHY v prohlížeči Chrome, zobrazí se vám WEBP, ale pokud přejdete na stejnou stránku ve Firefoxu, zobrazí se vám GIF. Protože GIPHY lazy načítá své obrázky, má GIPHY možnost používat detekci funkcí WEBP pomocí JavaScriptu.

Průkopník společnosti Google a Service Worker Jake Archibald nedávno na Twitteru zveřejnil úryvek, který ukazuje, jak můžete pomocí servisního pracovníka zjistit podporu WEBP:

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 načte platný identifikátor URI dat WEBP, aby zjistil, zda prohlížeč podporuje WEBP – génius! Jeho skript také používá async / wait ke zpracování slibů, kterým se brzy budu věnovat na tomto blogu. Upozorňujeme, že tento kód funguje mimo servisního pracovníka, takže jej můžete použít kdekoli ve svých vlastních projektech.

Pokud je váš web náročný na snímky, zvažte formátování obrázků pomocí WEBP; Podíl Chrome na trhu je tak velký, že to rozhodně bude stát za to. Pokud máte rádi malé tipy jako je tento, nezapomeňte Jakea sledovat na Twitteru!