WebP を導入するべく簡易Modenizr もどきを使用してフォールバックを行った。

1function checkWebpSupport(fn) {
2  "use strict"
3  const html = document.documentElement,
4        WebP = new Image();
5  WebP.onload = WebP.onerror = () => {
6    const isSupported = (WebP.width > 0 && WebP.height > 0);
7    
8    if (isSupported) {
9      if (html.className.indexOf('no-webp') >= 0) {
10        html.className = html.className.replace(/\bno-webp\b/, 'webp');
11      } else {
12        html.className += ' webp';
13      }
14    }
15    
16    fn(isSupported);
17  };
18  WebP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
19}

これをロード時に読み込ますことでhtml に付与されたクラスを切り替える。

• Frequently Asked Questions | WebP | Google Developers
• Check WebP Support in browser

他にNginx によるフォールバックの実装例も見つけた。

1location = /logo {
2  if ($http_accept ~* "webp") {
3    add_header Vary Accept;
4    rewrite (.*) $1.webp last;
5  }
6  
7  if ($http_user_agent ~* "(Chrome|Opera|Android|Android.*Chrome)") {
8    add_header Vary User-Agent;
9    rewrite (.*) $1.webp last;
10  }
11  
12  rewrite (.*) $1.png last;
13}

• webp compatible on nginx

これは単純にUAを判別し、拡張しを書き換える手法のよう。

CSSのimage-setもHTMLの様にフォーマットによる切り替えができれば、こんな回りくどいことしなくていいのだが…。