「次世代フォーマットでの画像の配信」対策!簡単WebP配信設定

GoogleのPageSpeed Insightsに表示される警告の一つ「次世代フォーマットでの画像の配信」の対策を紹介します。

次世代フォーマットとは?

わかめちゃんわかめちゃん

そもそも次世代フォーマットって何?

かつをくんかつをくん

注釈に書いてる通り、軽量かつ高画質を実現したフォーマットの事らしいで!JPEG 2000 / JPEG XR / WebP 辺りを指しての話みたいやね。

わかめちゃんわかめちゃん

聞いたことないなぁ…

JPEG 2000、JPEG XR、WebPは、古いJPEGやPNGファイルと比較して優れた圧縮および品質特性を持つ画像フォーマットです。 画像をJPEGやPNGではなく、これらの形式でエンコードすると、読み込み速度が向上し、スマホのデータ量が少なくなります。

https://tsuker.net/2018/11/next-generation-image.html

次世代フォーマット各種の実用性

次世代フォーマット各種の実用性

次世代フォーマットの特徴と実用性を調べてみました。画像は2019年6月末の調査結果です。

JPEG 2000

JPEG 2000
https://caniuse.com/#feat=jpeg2000
わかめちゃんわかめちゃん

真っ赤っかやんけwワロタw

かつをくんかつをくん

次世代フォーマットゆうだけあるなwww

Can I use の対応表の通り、対応しているブラウザはアップルのsafariのみ。

事実上アップルの独自規格で、現状実用性は皆無

一応フォーマット自体の特徴としては現行のJPEGに対して、同画質であれば、半分程度のファイルサイズになる。逆に処理負荷はJPEG比較で100倍とのこと … 。

JPEG XR

JPEG XR
https://caniuse.com/#search=JPEG%20XR
わかめちゃんわかめちゃん

あんまり変わらんなwwこれを使わせようとしてるの、流石にキツくね?

かつをくんかつをくん

まぁ、フォーマット自体の性能は現行フォーマットと比較にならんのやけどね。JPEGとか1990年代に策定された規格だし。

わかめちゃんわかめちゃん

プラットフォーム各社のバチバチの陣取り合戦が生々しいなw

JPEG XRは見ての通り、事実上マイクロソフトの独自規格状態

マイクロソフト系のブラウザ以外への対応がない為、ほぼ使い道がありません。

一応、「マイクロソフトはJPEG XRの使用・実装に対して特許を主張しない」とのこと。

かつをくんかつをくん

儲ける気なくなって、インフラ整備もする気なくなった感じやろか?

WebP

WebP
https://caniuse.com/#search=webp
わかめちゃんわかめちゃん

お?だいぶ緑増えたな。

かつをくんかつをくん

現実的にWebサイト用に次世代フォーマット選ぶならWebP一択やね。

わかめちゃんわかめちゃん

アップルのsafariから「意地でも対応しない」という固い決意がひしひしと伝わってくるなwww

かつをくんかつをくん

世界的に見たらブラウザシェアの70%はカバーしてるらしいんやけど、こと日本に関しては30%どまりらしいわ。

わかめちゃんわかめちゃん

日本人iPhone好きだからな。

フォーマットの特徴としては、透過OK、アニメーションOKなど現行の主流フォーマットを全部足して、更に高画質かつ高圧縮を実現した感じです。

WebPをワードプレスで導入できるプラグイン
[EWWW image optimizer]

EWWW image optimizer

画像圧縮系のプラグインとしてメジャーなプラグイン[EWWW image optimizer]が簡単にWebPの導入をできるようにサポートしています。

EWWW でWebPを設定する

EWWW でWebPを設定する

設定を開いたらWebPのタブを選択して、一番上のチェックボックスをONにします。

基本的にCDNやらのサーバー関係をいじってない人はこの項目だけでOKです。

CDNから画像を配信している方や、Lazy load系のプラグインを導入している方は必要に応じて一番下の[JS WebP Rewriting]のチェックボックスをONにする必要があるかもしれません。

とりあえず一番上のチェックだけでを行い[変更を保存]ボタンを押して先に進みます。

WebP画像を生成する

プラグインをインストールしたばかりの方は、イメージフォルダ内にある全オリジナルのファイルに対してWebP画像化をする必要があります。

上の項でWebP化にチェックを入れた状態で、設定上部にある[一括最適化]から画像の圧縮をかけると、WebP画像も一緒に作成されます。

圧縮に関する設定はこちらの記事を参考にしてください。特にこだわりがなければディフォルトでもOK。

.htaccessにリライトルールを挿入する

「.htaccessとか難しいからやめてくれー」って人も大丈夫です。
自動挿入機能があります。

リライトルールを挿入する

WebPの変換チェックボックスをONにして保存すると、設定下部に上の画像のようなテキストエディタ的な窓が出現します。実際は編集できないのでエディタではありません。(コピーは可)

この時点で右下のアイコンは赤くPNGと表示されています。

窓の左下に[リライトルールを挿入]というボタンが出現しているのでそれをクリックします。

クリックしても、ほぼほぼ画面に変化はなく、静かに「挿入成功」という文字がボタンの上に現れていれば.htaccessへの書き込みが成功しています。

挿入成功

更にこの状態から、[F5]ボタンを押して、画面を更新します。

先ほどのエディタっぽい窓は消えて、右下のアイコンが緑色の[WebP]と言う表示になっていればWebP配信の準備が整っています。

右下のアイコンが緑色の[WebP]
挿入が成功しない場合

ワードプレスを使用している環境によっては、CMSから.htaccessファイルへの書き込みが制限されている場合があります。

その場合は先ほどのリライトルールの窓に表示されていたテキストを丸ごとコピーして、FTPソフトを使ってアップロードする必要があります。

WebP配信されているかを確認する

設定が完了したら、きっちりWebPで配信されているかを確認しに行きましょう。確認にはクロームを使いましょう。

ご自身の管理サイトの確認したいページを開いて[F12]ボタンを押します。

デベロッパーツール

デベロッパーツールが立ち上がったら[Network]→[img]を選択。

この状態で画面の[Ctrl + F5]で更新をかけます。

WebP確認img

Typeのカラムに「webp」と表示されていたら正しく配信されています。

読み込んでるソースの拡張子[.webp]じゃないけど…?

鋭いですね。よくそんなこと気づきますね。

これ僕も気になって調べてみたんですが、どうやらこの状態でもWebPが配信されているようです。
画像のURLに直接アクセスして、ドラッグ&ドロップで引っ張った画像がWebPでダウンロードされてきたので、問題なくWebP配信出来てました。
それでも「何か上手い事いかん!」って方は、上でチェックボックスを保留にしていた[JS WebP Rewriting]の項目をONにしてみると上手くいくかも

まとめ

いずれ、規格が淘汰されて、統合化されてくるとは思いますが、現状はWebPが頭一つ抜きに出てる感じですね。

アップルだけ意地を張らずにsafariのWebP対応してくれたら皆ハッピーになるような気がするんですが、VHSの時代からメディアの規格争いってのはなくなりませんね。

独自規格って、使う側ホントに得しないんですけどね。

逆に競争があるからよい規格が生まれるという側面もあるでしょうから難しい問題ですね。