[say name="" img="https://bryog.com/wp-content/uploads/2020/09/vodman.jpg" ]PageSpeed Insights の改善項目に「次世代フォーマットでの画像の配信」と表示されたんだけど、いったいどうすればいいんだろう...[/say]
と悩んでいる人もいるでしょう。
そこで、この記事では下記の内容を紹介します。
この記事で分かること
[box class="box3"]
- 「次世代フォーマットでの画像の配信」と出たらすること
- そもそも次世代フォーマットとは何か
- どの次世代フォーマットを使うべきか
[/box]
PageSpeed Insights を使ってパフォーマンスをチェックしてみると、改善策の項目に「次世代フォーマットでの画像の配信」と表示されることがあります。
さらに項目をクリックしてみると、こんな説明が出てきます。
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。引用元：https://developers.google.com/web/tools/lighthouse/audits/webp
説明を見る限り、画像のフォーマットを変えれば良いってことだけは分かります。
ただ、どうしたら良いのかが PageSpeed Insights には書かれていないんですよね。
ということで、PageSpeed Insights で改善策の項目に「次世代フォーマットでの画像の配信」と表示された場合、どのようにすれば良いのかを解説します。
「次世代フォーマットでの画像の配信」の改善方法
まずは、「次世代フォーマット」って何かを知りたいですよね。
説明文にもありましたが、
[box class="box3"]
- JPEG 2000
- JPEG XR
- WebP
[/box]
というのが次世代フォーマットと言われていて、従来の JPEG や PNG の画質をあまり落とすことなくデータの容量を少なくしたフォーマット（拡張子）になります。
なので、改善したいのであればサイトで表示されている画像を上記のいずれかに変換すれば、「次世代フォーマットでの画像の配信」の文字は消えます。
次世代フォーマットの大きな問題点
次世代フォーマットに変えることで解決するのならば、サッサとやってしまえば良い話ですよね。
企業レベルのサイトではかなり対応が進んではいますが、個人レベルではほとんどの人がまだ踏み出していません。
それは、なぜか？
実は、次世代フォーマットは全てのブラウザに対応していないんです。
そのため、多くの人はまだ対応していないというのが現状ではあります。
JPEG2000 に対応しているブラウザ（2021 年 4 月現在）
「JPEG2000」に対応しているブラウザは、 Safari だけとなっています。
iPhone ユーザーだけにしか見せないとかならいいですが、あまり実用的とは言えませんね。
JPEG XR に対応しているブラウザ（2021 年 4 月現在）
「JPEG XR」対応しているブラウザは、IE と 一部の Edge だけとなっています。
このフォーマットも、IE ユーザーだけにしか使えないとなるとあまり実用的とは言えませんね。
WebP に対応しているブラウザ（2021 年 4 月現在）
「WebP」対応しているブラウザは、IE と 一部の Safari を除いては表示できるようになっています。
IE ユーザーは年々減っていますし、Safari も完全に対応されるのも時間の問題なので、必然的に「次世代フォーマット」を選ぶとしたら WebP になりますね。
[box class="box3"]
追記：IE11 の終了が Microsoft から発表されました。環境によってサポート期限が異なるので、詳しくはこちらをどうぞ。
[/box]
次世代フォーマットは実際にどの程度違うのか
次世代フォーマットだとどう違ってくるのか、ちょっとお見せしましょう。その方が分かりやすいと思うので。
普通に圧縮した画像（JPG） 44kb
次世代フォーマットにした画像（WebP） 21kb
（※ WebP フォーマットで表示しているので、IE と一部の Safari ユーザーはこの画像が表示されません。）
どうでしょう？ 見ただけでは全くわからないですよね。
でも、従来の画像を圧縮した画像が 44kb で、次世代フォーマットである WebP にすると半分の 21kb にまで容量を落とすことができています。
次世代フォーマットに切り替えて改善
次世代フォーマットに切り替えて改善するには、いくつかの手順が必要となります。
次世代フォーマットを導入する手順
[box class="box3"]
- 次世代フォーマットに変換する
- WordPress の場合はアップロード可能に設定
- 未対応のブラウザにでも表示できるようにする
[/box]
次世代フォーマットに変換する
次世代フォーマットは、おそらく WebP 一択になるんじゃないですかね。
上記でも解説したように、JPEG2000 も JPG XR も対応するブラウザが少ないですから。
WebP に変換する手段としては、サイト上で変換できるツールがオススメです。
WebP に変換できるオンラインアプリ
[box class="box3"]
[/box]
特に、グーグルが無料で提供する画像 WEB アプリ「Squoosh」は簡単に変換できるのでおすすめです。
[box class="box3"]
画像圧縮アプリ「Squoosh」が万能すぎる！【使い方とデメリットを紹介】
[/box]
ただ WebP にした後の画像を編集するのは難しく、フォトショやイラレで加工しようと思ってもデフォルトでは読み込むことすらできません。
利用にはプラグインが必要となるので、利用する際には手順を教えてくれる記事を探してみましょう。
WordPressの場合はアップロード可能に設定
多くの人が利用する WordPress ですが、実は WebP を含む多くのフォーマットをアップロードできないように制限されています。
その制限を回避するには、FTP や PHP を触る必要があります。
WordPress でも WebP をアップロードする場合には、下記の記事で手順を紹介しています。
[box class="box3"]
WebPをWordPressで使えるようにする３つの方法【画像変換してSEO対策】
[/box]
未対応のブラウザにでも表示できるようにする
次世代フォーマットは未対応のブラウザで開くと、？マークがついて画像自体は表示されません。
そのため、未対応のブラウザには従来のフォーマットである JPG と PNG を表示するように設定もできます。
WordPress にアップロードする方法や未対応のブラウザではどう対処したら良いのかなど、こちらの記事にまとめているので参考にしてみてください。
[box class="box3"]
WebPをWordPressで使えるようにする３つの方法【画像変換してSEO対策】
[/box]
さいごに：次世代フォーマットにして改善を
以上で、「次世代フォーマットでの画像の配信」と表示された時の改善方法を解説しました。
PageSpeed Insights は改善点をたくさん指摘してくれるのでありがたいんですが、「で？どうすれば良いの？」ってことが多いんですよね。
まあ今回に関しては、PageSpeed Insights に「次世代フォーマットでの画像の配信」と表示されたら、ひとまず WebP に対応したら OK です。
[say]未対応の IE も利用者が国内で数％しかいないので、思い切って WebP にするのもアリだと思いますよ。[/say]
