Page Speed Insights を使用していると、『次世代フォーマットでの配信』という指摘項目が出てくることがあります。
これはいったいどういうことなのでしょうか？説明と解決につながる手法をお伝えします。
とにかくざっくり意味を知って、すぐに対応したい方向け
初めに、すぐに対応を進めたい方向けに簡潔にまとめておきます。
- 指示内容は画像の軽量化を進められている
- とにかく楽したい方はプラグインで対応可能
- 余裕があれば、下記記事を読んで手動で画像の圧縮もしましょう
『WebP Converter for Media』というプラグインをいれるだけ
『WebP Converter for Media』をいうプラグインが、人気があって使いやすいと評判です。
- インストールをして、『設定』▷『WebP Converter』を選択。
- 基本的には、デフォルトのままでOK（『images quality』はお好みで試してください。最低の75%でも割といけます。『List of supported directories』では、「/uploads」のみにチェックが入っているので、「/plugins」「/themes」にもチェックを入れておきましょう。）
- 下の『Regenerate All』を押して終わるのを待つだけ。
- 変換時に『An error occurred while connecting to REST API. Please try again.』というエラーが出た場合は、パーマリンク設定で「基本」以外を選択しているか確認。「基本」に設定していると上記のエラー文が表示され、正常に動作しないようです。また、「基本」以外を選択しているにも関わらず、上記のエラー文が表示される場合は、一度別ブラウザ（普段使わない）でWordPressの管理画面にログインして、一括変換を実行してみてください。これで解決されることが多いみたいです。
- これで対応完了です！簡単！
しっかりと理解したい方向け
こちらでは、指示内容の意味や、細かな言葉についても触れておきます。
丁寧に対応したい方はこちらをご覧ください▼
次世代フォーマットでの画像の配信とは？
次世代フォーマットでの画像の配信とは、簡単に言うと、
「新しい技術を活かして、今よりもっと軽いサイズで画像を使ってね」
ってことです。
現状では末尾が、『jpg』『png』などの画像ファイルを使用している方が多いと思います。
現状では、便利な技術がどんどん進化していて、『AVIF』や『WebP』などのフォーマットが主流になっています。
AVIFとは？
▼AVIFについて、詳しくは過去記事にも記載していますのでご覧ください。
AVIFの欠点としては、現状最も軽いサイズのフォーマットと言われていますが、対応可能ブラウザがまだまだ少なすぎて浸透するには至っていません。
ですが、上記の過去記事に「まずはAVIF、対応していなかったらこのフォーマット、それでもだめならこれ」といったなんとも都合の良い、条件分岐コードも記載していますのでご覧ください。
WebPとは？
WebPも従来のフォーマットに比べると、はるかに軽量化が可能になった画像フォーマットです。
AVIFと同じく、対応可能ブラウザが少なくいまいち浸透していませんでしたが、ここ最近で一気に主要対応ブラウザが増えたこともあり、一般的となりました。
WebPのメリットとしてまず挙げられるのは、非可逆圧縮であるにもかかわらずアルファチャンネルを扱えることです。
非可逆圧縮とは、画像を拡大したり縮小したりできないことです。たとえば、非可逆圧縮の画像フォーマットでは、画像の一部をカットして保存した場合、もう元のデータには戻せなくなります。また、サイズ変更や上書き保存をすることで画質が劣化します。代表的な非可逆圧縮の画像フォーマットとしてJPGが挙げられます。
アルファチャンネルとは簡単に言うと、選択範囲を保存したり、編集したりすることができる機能のことです。Photoshopなどを使用される方はご存知だと思いますが、とにかく便利なやつです。
WebPもJPGと同じく非可逆圧縮の画像フォーマットですが、アルファチャンネルを扱えるメリットがあります。画像処理においてアルファチャンネルを扱えると、たとえば背景を透明にできるなどのメリットがあります。可逆圧縮であるPNGやGIFは背景透過ができることが大きなメリットとされています。
WebPは非可逆圧縮でありながら背景透過ができるのです。JPGとPNGやGIFのメリットを併せ持つ画像フォーマットだといえるでしょう。
デメリットは対応ブラウザが増えたことによりほとんどなくなりました。強いて言えば、画像編集ツール等がまだ対応できない点などはありますが…
※2021/11現在、Webpは可逆圧縮も対応可能でした。
また、Photoshopでもプラグインを使用して、Webpでの保存が可能となっております。
プラグインで一括対応する【WebP Converter for Media】
冒頭でもお伝えしましたが、まずはプラグインで解決できる部分も多いので、まずはこちらから試してみてください。
今回紹介するプラグインは『WebP Converter for Media』です。簡単操作で対応できるので、難しいコーディングがわからない方でも楽に対応できるのでオススメです。
インストール後に、『設定』▷『WebP Converter』へと進みます。
設定は基本的にデフォルトのままでOKですが、『images quality』はお好みで数値を試してください。最低の75%でも割といけます。『List of supported directories』では、「/uploads」のみにチェックが入っているので、「/plugins」「/themes」にもチェックを入れておきましょう。
設定が終わったら『Save Changes』を押して設定を保存しておきましょう。
画像を変換する
設定が終わったら、既存の画像を全て変換していきましょう。
『Regenerate All』を押して変換スタートです。
上のチェックボックスは、変換済みの画像を一緒に変換するかどうかのチェックです。設定を変更した際などに再度変換する場合は、こちらにチェックを入れておきましょう。
エラーが出た場合は
下記画像のようにエラーが出てしまう場合があります。
この時、パーマリンク設定で「基本」以外を選択しているかご確認しましょう。「基本」に設定していると上記のエラー文が表示され、正常に動作しないようです。
また、「基本」以外を選択しているにも関わらず、上記のエラー文が表示される場合は、一度別ブラウザ（普段使わない）でWordPressの管理画面にログインして、一括変換を実行してみてください。これで解決されることが多いようです。
プラグインで個別に対応する【Squoosh】
ここまでは、一括で対応できるプラグインをご紹介しました。
もう一方で一括で変換してしまうと、圧縮しすぎてしまうなどの問題があります。
今回ご紹介するSquooshでは個別に圧縮を確認しながら進めることができるので、手間を惜しまず対応したい方は是非こちらを使ってみてください。
トップページで画像をドラッグするとこのような画面になります。
右側の『Compress』の部分をWebPに変更しておきましょう。
『Quality』の部分動かすと圧縮率の数値を変更することができます。数値が低くなればなるほど、低画質になります。画面の左側が元の画質、右側が圧縮後の画質として確認できるので、絶妙なポイントを見極めてください。
最後に右下の水色のダウンロードボタンを押してダウンロードができます。
デメリットとして、一度に複数の画像を変更できません。どうしても時間や手間がかかってしまうので注意してください。
コマンドラインで一括置換
上記の「sqoosh」では、コマンドラインを使用してフォルダの画像を一括置換することが可能です。
ターミナルアプリを使用するので、少し文章だけ聞くと難しく感じますが、わかりやすく記事にまとめましたので、ぜひこちらをご覧ください。
まとめ
今回は、『次世代画像フォーマットでの画像の配信』についてお話をしてきました。
最低でも一括変換のプラグイン等で『WebP』がデフォルトになっていると好ましいですね。
この記事が多少なりとも、お役に立てばと思います。
記事を読んで不明な点等がありましたらお気軽にTwitter（@kaznak_com）などでご質問ください。
ではまた。
