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
わかめちゃん真っ赤っかやんけｗワロタｗ
かつをくん次世代フォーマットゆうだけあるなｗｗｗ
Can I use の対応表の通り、対応しているブラウザはアップルのsafariのみ。
事実上アップルの独自規格で、現状実用性は皆無。
一応フォーマット自体の特徴としては現行のJPEGに対して、同画質であれば、半分程度のファイルサイズになる。逆に処理負荷はJPEG比較で100倍とのこと … 。
JPEG XR
わかめちゃんあんまり変わらんなwwこれを使わせようとしてるの、流石にキツくね？
かつをくんまぁ、フォーマット自体の性能は現行フォーマットと比較にならんのやけどね。JPEGとか1990年代に策定された規格だし。
わかめちゃんプラットフォーム各社のバチバチの陣取り合戦が生々しいなw
JPEG XRは見ての通り、事実上マイクロソフトの独自規格状態。
マイクロソフト系のブラウザ以外への対応がない為、ほぼ使い道がありません。
一応、「マイクロソフトはJPEG XRの使用・実装に対して特許を主張しない」とのこと。
かつをくん儲ける気なくなって、インフラ整備もする気なくなった感じやろか？
WebP
わかめちゃんお？だいぶ緑増えたな。
かつをくん現実的にWebサイト用に次世代フォーマット選ぶならWebP一択やね。
わかめちゃんアップルのsafariから「意地でも対応しない」という固い決意がひしひしと伝わってくるなwww
かつをくん世界的に見たらブラウザシェアの70%はカバーしてるらしいんやけど、こと日本に関しては30%どまりらしいわ
わかめちゃん日本人iPhone好きだからな
フォーマットの特徴としては、透過OK、アニメーションOKなど現行の主流フォーマットを全部足して、更に高画質かつ高圧縮を実現した感じです。
WebPをワードプレスで導入できるプラグイン
[EWWW image optimizer]
画像圧縮系のプラグインとしてメジャーなプラグイン[EWWW image optimizer]が簡単に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]](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzE1IiBoZWlnaHQ9IjMzNyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iZmlsbCIgdmFsdWVzPSJyZ2JhKDE1MywxNTMsMTUzLDAuNSk7cmdiYSgxNTMsMTUzLDE1MywwLjEpO3JnYmEoMTUzLDE1MywxNTMsMC41KSIgZHVyPSIycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+PC9yZWN0Pjwvc3ZnPg==)
ワードプレスを使用している環境によっては、CMSから.htaccessファイルへの書き込みが制限されている場合があります。
その場合は先ほどのリライトルールの窓に表示されていたテキストを丸ごとコピーして、FTPソフトを使ってアップロードする必要があります。
WebP配信されているかを確認する
設定が完了したら、きっちりWebPで配信されているかを確認しに行きましょう。確認にはクロームを使いましょう。
ご自身の管理サイトの確認したいページを開いて[F12]ボタンを押します。
デベロッパーツールが立ち上がったら[Network]→[img]を選択。
この状態で画面の[Ctrl + F5]で更新をかけます。
Typeのカラムに「webp」と表示されていたら正しく配信されています。
鋭いですね。よくそんなこと気づきますね。
これ僕も気になって調べてみたんですが、どうやらこの状態でもWebPが配信されているようです。
まとめ
いずれ、規格が淘汰されて、統合化されてくるとは思いますが、現状はWebPが頭一つ抜きに出てる感じですね。
アップルだけ意地を張らずにsafariのWebP対応してくれたら皆ハッピーになるような気がするんですが、VHSの時代からメディアの規格争いってのはなくなりませんね。
独自規格って、使う側ホントに得しないんですけどね。
逆に競争があるからよい規格が生まれるという側面もあるでしょうから難しい問題ですね。
こちらの記事では更なる高速化を目指す方のための、CDN経由の「次世代フォーマット」での画像配信の方法を解説してます。
無料で使えるCDNは限られているのですが、現状Webを探しても詳細な設定の有力情報は非常に少ないので気になる方は是非のぞいてみてください。
コメント