WebPとは

昭和時代のホームページの画像といえば、写真はJPEG、イラストはGIFという形式でした。

あ、昭和時代にはまだwebは無かったので20年くらい前から10数年くらい前までの話です。

その後、イラスト的なのはGIFに変わってPNG形式やらSVG形式というのが登場し今現在の主流です。

イラスト的な画像はPNG,SVGになったけど写真画像は長いことJPEG形式が使われてます。

そんな中、Googleが発表したのがWebPという画像形式。ウエッピーって読むそうです。

以下Wikiより引用

ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。

Google社は常々「インターネットに流れるデータ量を削減せよ！」って訴えていて、Google社がやっている以下のようなテストサイトでも、遅いサイトは評価が低くなります。

PageSpeed Insights - Google Developers

WebP導入は時期尚早か？

今現在WebPの表示はEdge、Firefox、Chrome、Opera、Android Browser、その他色々が対応済み。

https://caniuse.com/#search=webp

日本の大手だと楽天がWebPを導入済みらしいけど、いまいち浸透していません。何故か？

それはアップル社がWebPを導入してないから。つまりアップルのマックやiPhoneのブラウザ(サファリ)ではWebPが表示できないのです。世界的に見るとiPhoneとアンドロイドのシェアはアンドロイドが圧勝。でも日本だけはiPhoneのシェアが異様に高いんですよね。

世界的にはWebP表示可能な端末は8割、でも日本だと4割しかないとか((((；ﾟДﾟ))))

アップルが採用してくれたら、ほぼ100％のユーザーが使えるけど、今のところ4割のユーザーのためにWebPを導入するのは、まーまー大変なので日本ではまだ浸透してないようです。

WebPを通販サイトに導入してみた

そんなわけで時期尚早な気もするけど、勉強がてら3日ほどかけて会社の通販サイトの画像をWebPにしてみました。

商品画像のサムネイルをすべてWebP化。細かい手順は省きますが以下ページを参考にしてやってみました。

3ファイルでできるサイト全体の自動的なWebP対応 - Qiita

Google社によればJPEGファイルだと25％～34％ファイルサイズが小さくなるそうなんですが、実際にやってみるともっともっと小さくなりました。概ねファイルサイズが半分以下に。モノによっては見た目ほぼ同じでファイルサイズが1/10に！

このブログに画像をアップするとJPEGになっちゃうので直接貼れないけど、興味ある方は以下のリンクされた2つの画像をChromeで見比べてください(サファリではWebPは見れません)。ほぼ違いはわからないと思いますが、ファイル容量は10倍の差があります。

https://www.bass.co.jp/used_rod_image/J0101G5000754/IMG_7232.JPG

https://www.bass.co.jp/used_rod_image/J0101G5000754/IMG_7232.JPG.webp

JPEGの写真が175KB
webpの写真が13.4KB!

すごくねーっすか？

冒頭で「GIF、PNGの置き換えを意図する規格」って引用したけど、ロゴマークとかのグラフィックだと、ちょっとイマイチの見た目になります。PNGのソリッドな感じが薄れJPEGっぽい汚れが気になることも。なので個人的にはGIF・PNGの置き換えというよりは写真(JPEG)の置き換えに向いてると感じます。

今現在HETEMLサーバーではWebPを使えない

ちなみにパソコンにWebP画像をダウンロードしても、基本的に開けるのはGoogleChromeなどのブラウザだけです。アドビフォトショップでもデフォルトでは開けません(アドインあり)。オンラインで変換するサービスもあるけど、PCで扱うにはまーまー面倒ではあります。でも、こんだけ小さくなると使わない手はないですね。

ってことで、2019年12月現在の運用方法としてはサーバー側でJPEGからWebPに変換するのがおすすめです。

https://qiita.com/miyanaga/items/94b5bb42501e2292fb67

↑こちらにあるようにGoogleが用意してるcwebpコマンドをサーバーにインストールし、サーバーにアップされてるJPEGファイル群をスクリプトで一気にWebP化するっていう手順をオレも利用しました。

が、しかし、レンタルサーバーでこの作業をするのはroot権限が必要。会社のサーバーは問題ないけど、他のサイトで多用してるHETEMLはssh可能だけどroot権限ないからcwebpのインストールができません(´・ω・｀)　このブログもHETEMLサーバーなので、cwebp使えるのであれば画像をWebPにしたいけど今現在は無理みたいです。

で、別の手段としてPHPで変換するってのもあるようです。

https://www.php.net/manual/ja/function.imagewebp.php

ただしこれもPHPのコンパイル時にGDのオプションでWebPを指定しないとダメっぽくてHETEMLサーバーでは使えずでした。問い合わせフォームから中の人に訪ねたけどやっぱりダメなようです。

HETEMLサーバーが対応してくれたら、このサイトもWebP化して、読み込み速度アップできるようにしたいです。いつになるのか不明ですが(・ω・)ノ