PageSpeed Insightsで表示速度のスコアを調べたいURLを入力すると詳細なレポートが表示されます。
上記画像のようにレポート内にはページの読み込み速度を改善できる項目がいくつか記載されます。
今回はその中の『次世代フォーマットでの画像の配信』の対策ついてご紹介します。
そもそも次世代フォーマットとは
『次世代フォーマットでの画像の配信』の部分をクリックするとこちらの説明が表示されます。
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
要はこれらの画像フォーマットを使用することでページの読み込み速度を改善していきましょうということですね。
では今使っている画像を全部新しいフォーマットに変更すればOKかというと、注意する点がいくつかあります。
対応ブラウザがまちまち
便利そうな次世代フォーマットですが、ブラウザによって対応状況が異なります。
JPEG 2000
基本的にアップル推奨のため対応ブラウザは現状Safariに限られます。
Safari専用であれば問題ありませんが、現実的ではありませんね。
JPEG XR
こちらはマイクロソフト推奨の画像フォーマット。
対応ブラウザはIEとEdge。こちらも限定的なため実用には向きません。
WebP（ウェッピー）
IEを除くブラウザで対応予定。（Safariに関しては Safari 14〜の予定）
他二つに比べると圧倒的に対応ブラウザが多いですね。
IE11は未対応なのが残念ですが、次世代フォーマットの画像を使うとすれば基本的にはWebP一択となります。
WebPへの変換方法
簡単に今まで使っていた画像をWebPに変換するにはオンラインツールを使うという方法があります。
1.8MBあった画像が約400KBと約22%のサイズダウン。
画像にもよりますが、かなりの軽量化が期待できます。
WebPの導入方法
今まで使っていたjpgやpngなどの拡張子を持った画像を.webpと差し替えるだけでもWebP対応ブラウザであれば表示自体は可能です。
ただIE11なども考慮するとWebP対応ブラウザであれば.webpを表示し、IE11などWebP非対応ブラウザでは出し分けてあげる必要があります。
大きく分けて二つの方法があります。
HTMLでの対応
<picture>
<source type=”image/webp” srcset=”sample.webp” />
<img src=”sample.png” />
</picture>
このような記述をすることで、WebPのメリットを活かしつつ、古いブラウザでの表示も補完することができます。
.htaccessでの対応
HTMLでの対応に比べるとやや専門的な内容になりますが、一例として。
# WebP対応ブラウザかつWebPファイルがあればWebPファイルを返す設定
<IfModule mod_rewrite.c>
# Rewriteモジュールを有効にする
RewriteEngine On
# WebP対応ブラウザはAcceptリクエストヘッダにimage/webpを含む慣例
# その場合のみ後続のRewriteRuleを適用する
RewriteCond %{HTTP_ACCEPT} image/webp
# 対応するWebP版のファイルがある場合のみ後続のRewriteRuleを適用する
RewriteCond %{SCRIPT_FILENAME}.webp -f
# *.jpg、*.png、*.gifファイルを*.webpファイルに内部的にルーティングする(ルーティング先は$0.webpでも可)
# Content-Typeはimage/webpにする
RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>
# 拡張子.webpファイルへの直接アクセスにはContent-Typeとしてimage/webpを返す設定
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
# WebPファイルがあるかもしれない画像へのリクエストは全てVary: Acceptレスポンスヘッダを返す設定(CDN対策)
# Headerディレクティブ単独ではできないのでSetEnvIfディレクティブとの組み合わせで実現する
<IfModule mod_setenvif.c>
SetEnvIf Request_URI “\.(jpe?g|png|gif)$” _image_request
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=_image_request
</IfModule>
こちらのサイトを参考にさせていただきました。
まとめ
今回ご紹介させていただいた方法以外にもWordpressなどであればプラグインを使う方法もあります。
いずれにしろ新しい画像フォーマットを使うためには一手間が必要となりますが、対応ブラウザも増えてきた今では導入するメリットも大きくなっています。
積極的に取り入れていきたいですね。
