WebP(ウェッピー)を利用して画像を軽量化する


Webで使える画像のフォーマットは、JPEGやPNG、GIFなど多くのフォーマットがあります。
Webサイトでも画像をよく利用していくわけですが、画質や透明色の利用、色数やサイズ容量といろんな特徴を考えて、適した画像を使い分けていきます。

昨今のWebサイトでは、UXやSEOに関するいろいろな観点から表示速度を意識した構築が求められており、その中で画像のサイズ容量に影響する表示の速さも向上させる必要がでてきます。

そんな中、2010年9月末に「WebP(ウェッピー)」という画像フォーマットが登場しました。

WebPは、米Googleが開発しているオープンな静止画フォーマットの画像ファイルで、Webサイトのトラフィック量軽減と表示速度短縮を目的に開発されました。
拡張子は「.webp」となります。

気になるファイルサイズは、おおよそですが非可逆圧縮モードでJPEGより25-34%小さく、可逆圧縮モードでPNGより28%小さくなるとされています。

JPEGやPNGから変換しても、画質を落とすことなく軽い画像フォーマットとすることができます。
変換方法はいくつかありますが、以下のサイトでも簡単にWebPに変換することができます。

Squoosh
https://squoosh.app/

1980×1485ほどのJPEGですと画像にもよりますが、ファイルサイズが1.5MB〜2.5MBくらいになるかと。
こちらをWebPに変換すると、100KB〜200KBくらいになります。
とても軽くなります。

気になるWebブラウザの対応状況です。

↓ ↓ ↓

WebP image format
https://caniuse.com/#search=webp

SafariとIEが非対応となっています。
Safariはそのうち対応してくれると思いますが、IEはもう対応しないでしょう。

これまであまり普及していないのは、Webブラウザの対応が影響していました。
画像はWebサイトには重要な要素なので、表示されないのは問題ですからね。

ここではSafariとIEの問題を含めて、WebPの利用方法をご紹介します。


WebPの利用


WebPという画像フォーマットも、他の画像と同様にimg要素で読み込みます。
ただただ読み込むだけでしたら、以下のように記述するだけになります。

HTML

<img src="images/sample.webp" alt="">



しかし、非対応のWebブラウザでは画像が表示されません。
そこで、HTML5のpicture要素source要素を利用して、非対応ブラウザに対応していきます。

サンプルとして、JPEGとWebPの2つの画像フォーマットを指定してみます。
試してみる場合には、WebPに対応しているかわかりやすいように、同じ画像を2つ用意してJPEGかWebPか確認できるようにしてみると良いかも。

WebP(ウェッピー)の利用



ファイル名も同じにして画像を用意しました。
以下、picture要素を利用したコードになります。

HTML

<picture>
    <source type="image/webp" srcset="images/sample.webp"></source>
    <img src="images/sample.jpg" alt="">
</picture>



HTML5のpicture要素を利用することで、上からの優先順位で対応しているフォーマットの画像を適応させます。
source要素のtype属性は「image/webp」として、WebPのメディアファイルのMIMEタイプを指定します。そしてsrcset属性で画像のパスを指定します。

先に記述したsource要素の画像を適応しますが、WebPが非対応のブラウザは次のimg要素の画像を適応します。
これでSafariのWebP非対応問題は解決します。
そう、Safariは。

IE以外のWebブラウザは、上記のコードで対応できます。
ですが、IEはpicture要素に対応していませんので画像が表示されません。

このIE問題は、「picturefill.js」というJavaScriptのライブラリで対応していきます。
picturefillは、picture要素が非対応のブラウザに対して対応してくれるとても便利なライブラリになります。

picturefill.jsのダウンロードは、以下の公式サイトからできます。

picturefill.js
https://scottjehl.github.io/picturefill/#download

「min(minified)」となっている圧縮版のpicturefill.min.jsを利用するとファイルサイズも軽くて良いでしょう。

また、CDNも利用できます。
cdnjs.comから細かくバージョンも選べます。

↓ ↓ ↓

https://cdnjs.com/libraries/picturefill

ダウンロードしたファイルを読み込む場合

<script src="js/picturefill.min.js"></script>


ファイルパスはご自身のサイトに合わせてください。

CDNを読み込む場合

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>



picturefill.jsを利用することでIE11には対応できます。
10以下は怪しいところです。9以前は動かないでしょう。

IE11他、主要ブラウザでの対応として考えるのであればWebPは問題ないので、是非利用してみてください。