PageSpeed Insights で自分のサイトスピードを計測すると、改善策の項目に「次世代フォーマットでの画像の配信」と表示されるコトがあります。
こんな風に、
さらに項目をクリックしてみると、こんな説明が出てきます。
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。引用元：https://developers.google.com/web/tools/lighthouse/audits/webp
説明を見る限り、画像のフォーマットを変えれば良いってコトだけは分かります。ただ、どうしたら良いのかが PageSpeed Insights には書かれていないんですよね。
PageSpeed Insights で改善策の項目に「次世代フォーマットでの画像の配信」と表示された場合、どのようにすれば良いのか解説していきます。
【 もくじ 】
次世代フォーマットとは
まずは、「次世代フォーマットでの画像の配信」と書かれているうちの「次世代フォーマット」って何かを知りたいですよね。
説明文にもありましたが、「JPEG 2000」「JPEG XR」「WebP」というのが次世代フォーマットと言われていて、従来のJPEGやPNGの画質をあまり落とすことなくデータの容量を少なくしたフォーマット（拡張子）です。
ツールなどを使えば、JPEGやPNGの画像も次世代フォーマットに変換することが可能。
もし「次世代フォーマットでの画像の配信」という改善策が表示されているならば、今サイトで表示されている画像を全て「JPEG 2000」「JPEG XR」「WebP」に変換すれば、この項目は消えます。
次世代フォーマットの大きな問題点
次世代フォーマットに変えることで解決するのならば、サッサとやってしまえば良い話ですよね。ただし、ほとんどの人がまだ踏み出していません。
それは、なぜか？
実は、次世代フォーマットは全てのブラウザに対応していないんです。そのため、多くの人はまだ対応していないというのが現状。
次世代フォーマットの対応ブラウザ一覧（2019年4月現在）
| JPEG2000 | JPG XR | WebP | |
|---|---|---|---|
| Chrome | × | × | ○ |
| Safari | ○ | × | × |
| IE | × | ○ | × |
| Edge | × | ○ | ○ |
| Firefox | × | × | ○ |
さらに、多くの人が利用している WordPress では次世代フォーマットの画像をデフォルトでアップロードすることすらできません。
次世代フォーマットは実際にどの程度違うのか
次世代フォーマットだとどう違ってくるのか、ちょっとお見せしましょう。その方が分かりやすいと思うので。
普通に圧縮した画像 44kb
次世代フォーマットにした画像 21kb
（※ WebPフォーマットで表示しているので、Safari・IEの人は両方ともJPEG画像が表示されます。）
どうでしょう？ 見ただけでは全くわからないですよね。
でも、従来の画像を圧縮した画像が 44kb で、次世代フォーマットである WebP にすると半分の 21kb にまで容量を落とすことができています。
次世代フォーマットに切り替えて改善
次世代フォーマットに切り替えて改善するには、いくつかの手順が必要となります。
- 次世代フォーマットに変換する
- WordPressの場合はアップロード可能に設定
- 未対応のブラウザにでも表示できるようにする
次世代フォーマットに変換する
次世代フォーマットは、おそらく WebP 一択になるんじゃないですかね。JPEG2000 も JPG XR も対応するブラウザが少ないですから。
WebP に変換する手段としては、サイト上で変換できるツールがオススメです。特に、グーグルが無料で提供する画像WEBアプリ「Squoosh」は簡単に変換できるのでおすすめです。
画像圧縮アプリ「Squoosh」が万能すぎる！【使い方とデメリットを紹介】 ただ WebP にした後の画像を編集するのは難しく、フォトショやイラレで加工しようと思ってもデフォルトでは読み込むことすらできません。
利用にはプラグインが必要となるので、利用する際には手順を教えてくれる記事を探してみましょう。
WordPressの場合はアップロード可能に設定
多くの人が利用する WordPress ですが、実は WebP を含む多くのフォーマットを読み込みができないように制限されています。
その制限を回避するには、FTP や PHP を触る必要があります。
その辺りを触るのはまだ怖いという初心者の方は、もう少し WordPress に慣れてきてからでも良いと思います。
未対応のブラウザにでも表示できるようにする
次世代フォーマットは未対応のブラウザで開くと、？マークがついて画像自体は表示されません。
そのため、未対応のブラウザには従来のフォーマットであるJPGとPNGを表示するように設定もできます。
WordPress にアップロードする方法や未対応のブラウザではどう対処したら良いのかなど、こちらの記事にまとめているので参考にしてみてください。
WebPをWordPressに導入する方法【表示速度アップしてSEO対策】 さいごに
PageSpeed Insights は改善点をたくさん指摘してくれるのでありがたいんですが、「で？どうすれば良いの？」ってコトが多いんですよね。
もし、PageSpeed Insights に「次世代フォーマットでの画像の配信」という項目を消したいと思ったら、ひとまず WebP に対応してみてください。
まあ、全ブラウザが WebP に対応してからでも遅くはないかな…
