Como detectar se o navegador suportar imagens do tipo Webp

O código abaixo para detectar se um browser tem suporter para imagens do tipo Webp, faz uso dos comandos async / await para gerir as promises. Da mesma forma, o código abaixo pode ser executado em um service worker.

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('Webp é suportado pelo navegador.');
  }
  else {
    console.log('Webp não é suportado pelo navegador.');
  }
})();

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados:

Como gerar um arquivo simples para download no browser usando JavaScript Como desabilitar o clique direito do mouse usando jQuery Método cross-browser para detectar que a página foi carregada em JavaScript Puro (vanilla) Web mais rápida e bonita com WebP Maneira mais eficiente para detectar ad blockers Yandex Browser – O Navegador Russo de Código Aberto Como identificar o tipo de uma variável em JavaScript Como detectar mobiles / tablets / celulares usando caracteristicas CSS via JavaScript Rápida comparação das principais bibliotecas JavaScript para processamento de imagens