WebP形式の紹介
WebPはGoogleが開発した新しい画像形式で、非可逆圧縮、可逆圧縮、透過に対応し、圧縮後のファイルサイズはJPEGやPNGなどより小さくなります。そのため、帯域幅を節約し、ページの読み込み時間を短縮し、ユーザーの通信量を抑えられます。
AndroidとiOSのアプリは、Googleが提供するデコードライブラリを導入するだけで、簡単にWebP形式に対応できます。ただし、WebではWebPへの対応はまだそれほど普及しておらず、次の情報によるとCan I Useのデータ、現在 WebP に対応しているのは Chrome、Opera ブラウザー、および Android の WebView だけです。しかし、WebP 画像にはこれほど多くの利点があるのですから、Web ページで使えないのでしょうか？使えます。この記事では、この問題を取り上げます。
既存の画像をWebP形式に変換する
WebP 形式を使うには、ウェブサイトで使う画像すべてについて WebP 版を作る必要がある。CDN サービスを利用している場合、通常は WebP 形式への変換オプションが提供されている。例えば又拍雲：
このような設定を追加すると、画像URLに対応する接尾辞を付けることで、WebP形式のリソースを利用できるようになります。
webpackやgulpのプラグインを使って、画像形式を一括変換することもできます。ここでは詳しく説明しません。
ブラウザーでWebP形式を使う
すべてのブラウザーが WebP 形式をサポートしているわけではないため、二つの考え方があります。一つは WebP 形式をサポートするブラウザーでのみ WebP 形式を使うこと、もう一つは WebP 形式をサポートしていないブラウザーでも WebP を使えるようにすることです。
方法その一： <picture>タグ
<picture>は HTML5 の新しいタグで、次のものに似ています<video>複数の形式のリソースを指定して、ブラウザーが対応する形式を選んで読み込むようにすることもできます。
<picture class="picture"> <source type="image/webp" srcset="image.webp"> <img class="image" src="image.jpg"> </picture>
ブラウザーが WebP 形式に対応していれば、読み込まれるのはimage.webp、そうでなければ読み込まれるのはimage.jpg。
ブラウザーが対応していなくても<picture>タグでも、画像は引き続き正常に表示されるが、CSSでは正しく選択できない可能性があるpicture要素。例えばIE8では、以下のCSSは機能しません：
.picture img { width: 100px; height: 100px;
}ただし、画像には次のようにスタイルを記述できる：
.image { width: 100px; height: 100px;
}ブラウザーがWebP形式の画像を使っていても、最終的には適用されるimg要素のスタイル。
ただし、使用してさえいればhtml5shiv、古いブラウザーでもこのタグに対応できるようにすれば、CSSセレクターが正常に使えるようになります。
この方法が最も簡単だが、CSS内の画像（背景画像など）には適用できない。
方法二：JSで画像のURLを置き換える。
多くのページでは画像の「遅延読み込み」がよく使われます——通常は画像のURLをimg要素のカスタム属性の一つに格納し、その後、JSを使って適切なタイミングでURLを代入する先はsrc属性。同様の原理で、ブラウザがWebP形式に対応しているかどうかに応じて、img要素に異なるものを付与するsrc値。
まず、JSを使ってブラウザーがWebP形式に対応しているかを判定する必要がある。方法は、ブラウザーにWebP形式の画像を渡し、正しく描画できるかを確認するというものだ。この方法は非同期なので、後続の処理はコールバック関数内に記述する必要がある。結果は次の場所に保存できるlocalStorage内に入れることで、それ以降は再びチェックする必要がなくなる。
function checkWebp(callback) { var img = new Image();
img.onload = function () { var result = (img.width > 0) && (img.height > 0);
callback(result);
};
img.onerror = function () {
callback(false);
};
img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}そして、以下のコードを使い、WebPに対応しているかどうかに応じて該当するsrcを置き換えます。
function showImage(useWebp){ var imgs = Array.from(document.querySelectorAll('img'));
imgs.forEach(function(i){ var src = i.attributes['data-src'].value; if (useWebp){
src = src.replace(/\.jpg$/, '.webp');
}
i.src = src;
});
}
checkWebp(showImage);この方法の利点は、既存の遅延読み込み関数と組み合わせられることです。また、JSを使えば、背景画像などCSS内の画像も処理できます。
方法三：JSを使ってWebP画像をデコードする
WebP のデコーダーがオープンソースなら、JS で実装できるのだろうか？もちろんできる、JSでWebPのデコーダーを書いた人もいます。この JS ライブラリを導入するというのは、すべての WebP 画像を JS でデコードしてから、次の形式に変換することですbase64、その後、元の URL を置き換えます。これで、もともと WebP に対応していないブラウザーでも WebP を正常に表示できます。このライブラリの使い方はとても簡単で、ウェブページの説明を見ればわかります。
この方法の欠点は、JSでWebP画像をデコードするために、ここでsrc内のURLへ非同期リクエストを送る必要があることだ（ただし、画像自体はすでに一度ダウンロードされているため、そのままキャッシュが使われる）；また、JSのデコードは比較的遅く、パフォーマンスに影響するため、画像が表示されるまでに時間がかかる可能性がある。
以上が、ブラウザでWebP画像を使用するいくつかの方法です。実際の状況に合わせて選択できます。私たちの実践では、WebP形式を使用したところ、画像のサイズはおおむね1/3以上小さくなり、読み込みが速くなるとともに、ユーザーの通信量も節約できました。今からこの形式を使い始めることを強くおすすめします。
