【Tips】WebP対応を実践する！

Googleのアップデートや新たなSEO指標などの登場、各ブラウザの対応状況の改善などが重なり、新たな画像フォーマットである【WebP】がいよいよ一般化してきましたね。

（大変遅ればせながらですが・・・）弊社でも、実務レベルでの【WebP】対応を開始すべく検討を続けていましたが、現時点での最適解がまとまったので紹介していきます！

と、その前に・・・

Webp対応ブラウザ

皆さんおなじみ（？）の「Can I use」調べ。
https://caniuse.com/?search=WebP

IE以外（MacOSのSafariもまだ？）ほぼ全て対応しているので、いつでも導入OK状態（もちろんWebP非対応ブラウザ向けの対処は必要だけど）。

WebP画像の生成方法

Photoshop（Ps）の画像アセット生成機能を使いますが、デフォルトのPsでは生成できないので、プラグインを入れて対応させます。

プラグインのインストール

配布先は以下。
https://exchange.adobe.com/creativecloud.details.2274.generator-config.html

1. 右上のほうにある青い「Free」というボタンをクリック。（CCにログインしてないとログインを求められます）

   

2. 「Creative Cloud」が起動するはずなので、プラグインをインストール。（インストールには管理者権限が必要です！）
   

   

3. インストールできたら、Psを起動
4. メニューの
   ウィンドウ → エクステンション（推奨） → Generator 設定
   をクリックするとツールバー内に「Generator 設定」のアイコンが追加
   

   

5. 「Generator 設定」を開いた中にある「WebPを有効にする」をクリック
   

   

6. このウィンドウをスクロールすると一番下に【保存】があるので、クリックして設定を保存
   

   

この手順で、「WebP」が画像アセットで生成できるようになります。

圧縮率を変えられる

Psの「画像アセット」は拡張子の後に数字などを入れると圧縮率が変えられます。
これと同じ方法が「WebP」の場合にも使えます。

hogehoge.webp8,hogehoge.jpg7

なので、これまでJPGやPNGなどを画像アセットで生成されていた方々は、今までと同じフローでWebP生成が出来るようになります！

（実作業をしてて気がついたのですが）アセットを切るとき、
hogehoge.webp
のように圧縮率を書かずに書き出すとちょっと劣化して書き出されることがあります。
キレイに出力したい場合は
hogehoge.webp10
と書いて100％の画質でWebPが生成されるようにしたほうがいいです。

圧縮率の実験

せっかく導入できたので、圧縮率によってどれくらい変わるものなのか、実験してみていと思います。

写真は、いつぞやに食べた味噌ラーメンｗ

JPG（100％）：206KB	Webp（100％）：84KB
JPG（80％）：146KB	Webp（80％）：53KB
JPG（60％）：86KB	Webp（60％）：36KB
JPG（40％）：52KB	Webp（40％）：27KB
JPG（20％）：37KB	Webp（20％）：18KB

ちょっと分かりにくい・・・
最近の？Psは圧縮してもキレイなので、JPGはそんなに悪くない。
WebPは40〜20％はディテールが死んでますね。
ただデータ容量がWebPはJPGの半分〜1/3なので結構差が出てますね。

人物写真で比較

JPG（100％）：140KB	Webp（100％）：49KB
JPG（60％）：58KB	Webp（60％）：18KB
JPG（20％）：25KB	Webp（20％）：9KB

WebPは60％以下はちょっとダメですね・・・
JPGもさすがに20％は無理。60％もギリギリ。
ただ容量で比べるとWebPの100％がJPG 60％より軽いので、これはかなりお得！

もしもMACでWebpのサムネ画像が表示されなかったら・・・

弊社エンジニアからの情報。
MACでサムネ画像のプレビューが出来ない場合は以下のコマンドをターミナルで叩いて再起動すれば見られるようです。
（私は何もしなくても見られていたので、実行してませんｗ）

curl -L https://raw.github.com/emin/WebPQuickLook/master/install.sh | sh

※ターミナルの実行は、自己責任でお願いします！

以上となります。
いかがでしょうか、生成自体は実に簡単だったと思います。
あとはHTML、CSSやサーバー側の問題がありますが、弊社は「htaccessでの制御」で当面様子を見ることにしました。

実際にいくつかのサイトでWebP導入を進めましたが、ファイル総数3000枚以上の画像について、WebP対応前の総容量が【200.5 MB】だったのに対し、WebPのみの場合が【73.5 MB】と約1/3（-63.34%）と相当量減りましたし、体感で差が分かるくらいに早くなりました。

もっと早くやっておけば良かった・・・。

運用の参考になれば幸いです。

＝うしお＝