【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生成が出来るようになります!


圧縮率の実験

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

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

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でサムネ画像のプレビューが出来ない場合は以下のコマンドをターミナルで叩いて再起動すれば見られるようです。
(私は何もしなくても見られていたので、実行してませんw)

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%)と相当量減りましたし、体感で差が分かるくらいに早くなりました

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

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



=うしお=

おかかキャンディ
2021.07.15

5の「WebPを有効にする」にチェックいれても書き出しできてなくて、?ってなってたんですがその下スクロールしたとこにある「保存」押したらできるようになりました😂キヅカナカッタ…
他にもそういう方居られましたら・・・。

返信不要です。

牛尾 好宏
2021.07.15

あぁそうかー
それ分かるようなキャプチャ用意して、貼っておきます!

Y.O
2021.07.09

サイト表示高速化のためにはリクエスト数を減らすのが大事で、画像サイズそのものは小さければ問題ない・・・というのが定説でしたが、
ここまで圧縮できると画像が多いサイトでは特に効果的ですね!
手が空いている時に入れてみようと思います。

牛尾 好宏
2021.07.09

どのサイト対応したかはご存知のとおりだと思うけど、SPの4Gで見たときの差にびっくりしたよ!
プラグインのおかげで導入ハードルがグッと下がってよかった!

関連記事