JPEGやPNGよりもファイルが軽くなるWebPという画像形式

さて、今回はWebPという画像フォーマットについて紹介したいと思います。
これまで一般に使われている画像フォーマット形式はJPEGやPNGなどが多いですね。
これらの画像と同じく、その新しい形式がWebPというものだと思ってもらえると理解が簡単です。
JPEGやPNGなどの画像フォーマットに比べて、WebPとはその品質を保ったままさらに画像の容量を減らすことができるGoogle社によるた新しい画像のフォーマットです。

JPEG、PNGの画像フォーマットについてはこちら
JPGとPNGきちんと使い分けていますか？これでわかるホームページで使う画像形式の選び方。

ホームページの閲覧において、表示されるスピードは非常に大事ですね。
せっかく検索をしても、なかなか表示されないページにイライラして、別のサイトに行ったことはありませんか。
ページの表示スピードが遅い理由の1つに画像の容量があります。
最近では、レスポンシブ対応に伴って画像を使ったデザインが多くなってきましたね。
テキストでグダグダと説明するよりも、１つのきれいな画像を使うことで伝わることがたくさんあります。
テキストデータに比べて画像データは大きく、ページの表示スピードにおいてはネックになる部分ではありますが、使わないわけにはいきません。
周りのサイトが同様に大きな写真を使う中で、自分がこの画像の容量を節約する方法を知っていればページ表示に対するパフォーマンスで優位になれます。

ページの表示スピードは、閲覧するユーザのストレスに非常に影響与えます。
サクサクと動くホームページと、なかなか表示されないページでは、サクサクと動くページを選びますよね。
Googleもそのように考え、検索の上位にはできるだけストレスのないコンテンツを載せたいのです（もちろん、それ以上にコンテンツの質！）。
なので、ページの表示スピードの改善がSEO対策につながるということもあり、ここはぜひやっておきたいところです。

画像がページの表示に与える影響ってどれくらい？

PageSpeed Insightsというサイトがあります。
URLを入力して分析を行うと、そのページがどれぐらい快適に表示されるかというのを様々な視点の指標として出してくれるツールです。
このように、入力したURLに対してそのページの閲覧の快適度が点数が現れます。

この点数だけが全てでは無い（ページの質とトレードオフになる部分もあるので）ですが、そこはバランスを取りながらではありますが品質の一つの指標にはなります。
PageSpeed Insightsでは評価とともに、様々な改善のヒントが表示されます。

この中に、次世代フォーマットでの画像の配信という項目がありますね。
「JPEG 2000、JPEG XR、WebP などの画像フォーマットを使えば、ダウンロード時間やデータ使用量を抑えることができる」と書いてあります。

短縮できる時間の推定値が20.25sと書かれているので、ここ改善すると相当早くなりそうですよね。
そして、ここに書かれているWebPについて今回は紹介しています。
WebP以外にもJPEG 2000、JPEG XRといった画像フォーマットがあるのですが、新しい規格というのはすぐに浸透するわけではなく、まだまだ対応していないブラウザが多いので、それを使ったとしても画像が見れないユーザがまだまだ多いのです。
なので、新しい技術というのは、それがどれくらい今までと同じように利用できるかというのが大事で、
その中でWebPに関しては、ほぼ主要なブラウザで見れる状態になったので、十分に使えるものとして広まってきました。

Can I use… Support tables for HTML5, CSS3, etc
IE以外は、最新ブラウザではほぼ使える状態となっています。
IEはすでにサポート終了し、Edgeに変わっていますので最新はEdgeとして考えます。
WebPについて、メリットやデメリットとして改めてまとめてみます。

メリット

メリットはなんといってもその圧縮率の高さです。
圧縮率が高い=画像の容量が小さくなるという事なんですが、おかげでインターネットを介した通信の容量が減るので、WEBページであればより早く表示されるようになります。

デメリット

デメリットは、先ほど書いたように全てのブラウザで表示されるわけではないというところです。
主要なブラウザで表示されるとはいえ、バージョンアップをせずに古いブラウザを使っているユーザーはまだまだいます。
それに対する対策はありますが、そのため多少の手間もかかります。

デメリットもありますが、
WebPは主要なブラウザでは対応されていますし、後ほど書きますが古いブラウザに対してはこれまで通りJPGを表示するという方法をとることができます。
なので、ユーザーにとってはメリットしかない状態なので、ぜひ使ってみましょう。

WebP形式の画像を作る方法

さて、WebPってどうやって作るのっていうことですね。
WebP形式で画像を書き出す方法はいくつかあるのですが、

・インターネット上のサービスを使う
・Photoshopのプラグインを使う

2つを紹介しますね。

インターネット上のサービスを使う

私は、Photoshopで書き出しているのでインターネットのサービスを使ったことがないのですが、持っている画像をアップロードするだけで簡単にWebPに変換してくれるサービスはいくつもあります。
「WebP変換」とかで検索するとすぐに出てきますが、例えば

JPG WEBP 変換。オンライン フリー — Convertio

とか。
逆変換もあります

WEBP JPG 変換。オンライン フリー — Convertio

こんなところを使えばいいんじゃないでしょうか。

Photoshopのプラグインを使う

ホームページを仕事として作っている人のほとんどはPhotoshopを持っているでしょう。
Photoshopを使えば、普段JPGやPNGを書き出しているのと同じように、WebP形式で書き出すことができます。
Photoshop標準ではWebPで書き出す機能はありませんが、Googleがプラグインを公開しているのでそれを使えば簡単にWebP形式で書き出すことができます。
ざっと要点を書くと、Photoshop用のプラグインファイルがあるので、プラグイン用のフォルダ内にコピーしてPhotoshopを立ち上げるという手順になります。
WindowsとMacでファイルや、コピーする先が違うので、そこだけ以下で確認しましょう。

まずは、以下のURLからプラグインファイルをダウンロードしてきます。
GitHub – webmproject/WebPShop: Photoshop plug-in for opening and saving WebP images

上記URLへ入り、「Code」というボタンから「Download ZIP」をクリックしてファイル一式をダウンロードします。

Windowsの場合はダウンロードしたファイルの、

WebPShop-master\bin\WebPShop_0_3_0_Win_x64

というフォルダにプラグインのファイル「WebPShop.8bi」が入っています。

これを、Photoshopのプラグインファイルのフォルダ
C:\Program Files\Adobe\Adobe Photoshop\Plug-ins
※Adobe PhotoshopはPhotoshopのバージョンによって少し変わります
にコピーしましょう。

Macの場合は、

WebPShop-master\bin\WebPShop_0_3_0_Mac_x64
内の「WebPShop.plugin」フォルダを
/Applications/Adobe Photoshop/Plug-ins
にコピーします。

これでPhotoshopを起動すれば、WebP画像を扱えるようになっています。

PhotoshopでWebPファイルを書き出そう

では、WebPファイルを書き出してみましょう。
PhotoshopでWebPへ変換したい画像を開きます。
シチュエーションとしては、Photoshopを使ってデザインが終わった、さて書き出そうという段階ですね。

そして、それを通常のファイル保存をします。
既存のファイルを開いた場合は、[ファイル]-[別名で保存]を選びましょう。
こういった時は、ショートカット[Ctrl+Shift+S]を覚えておくと便利ですよ。

出力するファイルの種類にWebPがあると思いますので、これで出力します。

簡単ですね、
プラグインさえ入れておけば、いつものファイル形式の書き出しと変わりません。
書き出したファイルサイズを見てみてください、JPGやPNGの時よりもサイズが小さくなりましたか？

これまで、JPGやPNGで画像を書き出していたのと感覚的には変わりません。
単にWebPという選択肢が増えただけ。
※私の場合は、JPGやPNGをWEB用に書き出すときは違う形で書き出ししていますが・・・

WebPファイルをホームページで使ってみる

さて、これを実際に使ってみましょう。

準備として、
画像フォルダには、今まで通りJPGやPNGで画像を作りますが、同名の.webpファイルも同じフォルダに書き出ししておきます。
同じ画像に対してJPG、もしくはPNG画像と、同名のWebP画像の２つファイルを用意しておく必要があります。

コードについてですが、いつもどおりJPG、もしくはPNGを<IMG>タグで呼び出してください。
いつもとかわらずコードを書きます。

さて、WebPで表示させる仕組みとして、このようなことをします。

「ブラウザで画像を表示させる際に、同名のwebpファイルが存在かつWebP対応のブラウザであれば、WebP形式で表示させる」

流れをまとめましょう

１に関しては、２をするために必要ということで理解できるでしょう。

２なのですが、初心者には少しややこしい。
.htaccess
というファイルを用意します。
※WindowsなどのOS上では「.」から始まるファイルは作成できないので、ファイル自体は（FTPなどで）サーバー上で作ることになります

そこに以下を書いてください。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

とにかくこれを書いた.htaccessを用意してホームページのトップページの階層にアップしましょう。

中身は理解しなくていいので、これが書いてあれば、そのフォルダ以下ではブラウザがWebPに対応してるかどうかを判断して、WebPとこれまでのフォーマットを自動的に選択してくれます。
そのためには、さきほどの１のように、あらかじめWebPと同じファイル名でJPGやPNGの画像を用意しておきましょう。

WebPファイルはちゃんと適用されているのか？

では、それでホームページを確認してみましょう。
キャッシュが残っているとダメなので、キャッシュも消してくれる強制リロード「Ctrl+Shift+R」してください。
更新されましたが、表示上何も変わりませんよね。
そりゃそうですよね、ファイルが切り替わっても見た目は同じなんで。
ということで、ちゃんとWebPがロードされているか確認しましょう。

Chromeブラウザの検証ツールを使って調べます。
ページを表示したら、キーボードのF12を押して検証ツールを開いてください。
こんな感じで、ブラウザのサイドなどに検証ツールが現れます。

検証ツールで[Network] – [Img] を選択してください。
この状態で、あらためてブラウザの画面を更新してみましょう。
すると、ブラウザでの読み込み状況が表示されていきます。

その中で、WebPファイルとして用意されたものがあればwebpと表示されているかと思います。

これで成功です、画像ファイルを小さく出来ました。
一度やり方を覚えてしまえば、２つファイルを作るという手間がありますが使うのは簡単です。
今のところ、まだまだWebPで画像を作っている人は少ないと思います、この圧縮率の良さを最大限に利用して他のサイトに比べて早いスピードで表示させるようにすれば、相対的にSEOにも効果があるでしょう。
WebPが今後のスタンダードになるかはわかりませんが、今のところ一番の有力候補です。

ページの表示のスピードアップを考えている人は、ぜひやってみてください。