Detectar suporte a WEBP com JavaScript

A otimização de imagens é uma grande parte do aprimoramento do desempenho do front-end. Tradicionalmente, usamos imagens JPG/JPEG, GIF e PNG, mas o Google e a equipe do Chrome desenvolveram o formato WEBP, que reduz o tamanho do arquivo e otimiza a renderização. Se o senhor acessar um site como o GIPHY no Chrome, receberá um WEBP, mas se acessar a mesma página no Firefox, receberá um GIF. Como o GIPHY carrega suas imagens de forma preguiçosa, o GIPHY tem a oportunidade de usar a detecção de recursos WEBP com JavaScript.

Googler e pioneiro em serviços Jake Archibald tweetou recentemente um trecho mostrando como o senhor pode usar um service worker para detectar o suporte a 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 busca um URI de dados WEBP válido para determinar se o navegador é compatível com WEBP – genial! Seu script também usa async / await para lidar com promessas que abordarei em breve neste blog. Observe que esse código funciona fora de um service worker, portanto, o senhor pode usá-lo em qualquer lugar em seus próprios projetos.

Se o seu site tiver muitas imagens, considere a possibilidade de formatá-las com WEBP; a participação de mercado do Chrome é tão grande que com certeza valerá a pena. Se o senhor gosta de pequenas dicas como essa, não deixe de seguir Jake no Twitter!