Table of Contents
By Marine Larmier - 最終更新日
WordPress で WebP を使う方法や、WordPress のメディアライブラリにある今の画像を変換する方法を知りたいと思っていませんか？それなら、この記事がぴったりです！
PageSpeed Insights でウェブパフォーマンスのテストを実行すると、パフォーマンスを高めるための改善提案として「次世代フォーマットでの画像の配信」が表示されることがあります。Google は、JPEG や PNG のことは忘れて、画像最適化の取り組みを WebP のような画像フォーマットに集中させるよう伝えているのです。
このガイドでは、この警告を解消する方法と、WordPress での WebP について知っておきたいことをすべて解説します。また、ほぼあらゆる形式の画像を WebP に変換できるおすすめのツールの一覧も紹介します。
WebP 画像フォーマットとは？
WebP は Google が開発した、ウェブ向けの次世代フォーマットです。画質を保ちながら、可逆圧縮と非可逆圧縮の両方で画像を優れた効率で圧縮します。従来の JPEG や PNG と比べて、この最新のフォーマットではファイルサイズをさらに小さくでき、その結果、ページの読み込みが速くなります。
WebP、PNG、JPEG の比較
3つのフォーマットのどれにするか迷っていて、パフォーマンスを重視するなら、WordPress で最適化した画像を配信するために WebP を選びましょう。その理由はこれからわかります。
JPEG と WebP の違い
どちらのファイル形式も、画像を圧縮してウェブで共有しやすくし、画質を保ちます。見た目はかなり似ているのに、なぜ WebP を選ぶのでしょうか？
WebP ファイルは一般に、従来の JPEG よりはるかに小さくなります。Google によると、非可逆圧縮の WebP 画像は、同等の JPEG ファイルより25%から34%小さくなる可能性があります。
下の図を見てください。WebP（赤）は JPEG と比べて、より高い圧縮率を実現しています。
手元の 3.7 MB の JPEG 画像で、このことを確かめてみましょう。WebP に変換すると、画質は同じままで、ファイルサイズは 1.3 MB まで小さくなりました。
PNG と WebP の違い
PNG は主に、高画質の写真よりも、ロゴやイラストなど背景のないウェブ用グラフィックに使われます。通常、ほかのフォーマットより多くの保存容量を使います。可逆圧縮の WebP 画像は、PNG より平均26%小さくなります。
もう1つ簡単なテストとして、PNG 画像を WebP に変換してみましょう。元のファイルは 432 KB でしたが、WebP に変換するだけで 244 KB まで小さくなりました。
JPEG、PNG、WebP の比較
要するに、WordPress サイトの Lighthouse パフォーマンススコアを改善したいなら、WebP を選びましょう。3つのフォーマットを比べると、次のようになります。
WebP に対応しているブラウザは？
2023年の時点で、主要なブラウザはすべて WebP に対応しています。たとえば、この最新のフォーマットは Google Chrome、Safari、Firefox、Edge、Opera ブラウザ、そのほかのツールでネイティブにサポートされています。
古いブラウザ向けのフォールバックを使った WebP 画像の表示
画像は優れたユーザーエクスペリエンスに欠かせないため、古いバージョンのブラウザを使っている訪問者も含め、すべての訪問者に表示されることが望ましいです。安全策をとるなら、PNG や JPEG など、ほかの従来のフォーマットへのフォールバックを有効にするとよいでしょう。
WebP 画像にフォールバックを追加する方法
- 訪問者が古いバージョンを使っている場合に備えて、画像に
<picture>タグを追加してフォールバックを実装できます。WebP に対応しているブラウザはdog.webpを表示し、WebP に対応していない古いバージョンのブラウザはdog.jpgの要素に切り替えます。
- Imagify のように、画像を WebP に変換し、
<picture>タグを使って WebP 画像のフォールバックを有効にできる WordPress プラグインを使います。
WordPress で WebP 画像を作成して使う方法
WordPress 5.8 以降、WordPress は WebP 形式に完全に対応しています。画像をメディアライブラリにアップロードして、コンテンツに挿入するだけです。
WebP 画像を作成できるおすすめプラグイン4選
WordPress に WebP 画像をアップロードするために、サードパーティの拡張機能をインストールする必要はもうありませんが、既存の画像を WebP に変換するにはプラグインが必要です。画像を WebP に変換するのに使える、WebP 用の WordPress プラグインを4つ紹介します。
- Imagify：WebP 変換機能を備えた、使いやすい画像圧縮プラグインです。月に約200枚の画像まで無料で使えます。
- WebP Converter for Media：標準的な JPEG、PNG、GIF 形式のファイルを WebP 形式に変換します。
- WebP Express：ユーザーに WebP 画像を配信するためのコードを1行追加します。
- ShortPixel Image Optimizer：JPEG、PNG、GIF を WebP と AVIF に変換する、もう1つの画像最適化プラグインです。
WordPress で WebP 画像を作成する方法
WordPress で WebP 画像を作成する最も簡単な方法は、Imagify のようなプラグインを使うことです。一括圧縮とあわせて、すべての画像をワンクリックで WebP に変換できます。
- JPEG、PNG、PDF、GIF ファイルを WordPress のメディアライブラリにアップロードします
- WordPress のダッシュボードで 設定 > Imagify > 最適化タブに移動します
- 次のチェックボックスにチェックを入れます：「Create WebP versions of images」と「Display images in WebP format on the site」
おまけ：WordPress を使っていない場合も、Photoshop、Lightroom、Sketch などのデザインソフトを使って、メディアを直接 WebP 形式で書き出せます。
画像の最適化をさらに強化しましょう
画像の圧縮や WebP への変換に加えて、遅延読み込みも、最適化した画像を訪問者に配信し、ページの読み込み速度を高めるためのもう1つの方法です。Lazy Load のようなスクリプトを使うと、ブラウザはファーストビュー（ユーザーのビューポート内）にある画像だけを読み込みます。
また、PageSpeed Insights はパフォーマンスレポートで、遅延読み込みの適用を意味する「オフスクリーン画像の遅延読み込み」を推奨しています。
WebP 画像に遅延読み込みを適用する方法
WebP 画像に遅延読み込みのスクリプトを適用する最も簡単な方法は、WP Rocket のような WordPress プラグインを使うことです。遅延読み込みを実装するには、WordPress の管理画面から直接、次の2つの簡単な手順を実行してください。
- 設定 > WP Rocket > LazyLoad タブに移動します
- 画像、CSS 背景画像、iframe と動画の中から、適用したい項目のチェックボックスにチェックを入れます。
🏆 WP Rocket は、CSS 背景画像の遅延読み込みをワンクリックで実現した最初のプラグインです！
最後に、PageSpeed Insights は WordPress サイトに WP Rocket がインストールされているかどうかを検出でき、そのうえで LazyLoad 機能を有効にするよう勧めてくれます。
🚀 ウェブパフォーマンス全体を改善したいですか？WP Rocket は WordPress で最も優れたキャッシュプラグインの1つでもあり、数クリックでデータベースやコードを最適化し、サイトの Core Web Vitals を改善します。
よくある質問
WebP とは何ですか？
WebP とは、Google が開発したウェブ向けの次世代画像フォーマットです。画質を保ちながら優れた可逆圧縮と非可逆圧縮を実現し、従来の JPEG や PNG よりファイルサイズをさらに小さくできます。その結果、ページの読み込みが速くなります。
WebP と PNG、JPEG の違いは何ですか？
WebP は、JPEG や PNG と比べて、画質を保ったままファイルサイズをより小さくできる画像フォーマットです。Google によると、非可逆圧縮の WebP 画像は同等の JPEG ファイルより25%から34%小さくなる可能性があります。また、可逆圧縮の WebP 画像は PNG より平均26%小さくなります。この記事のテストでは、3.7 MB の JPEG 画像が同じ画質のまま 1.3 MB に、432 KB の PNG 画像が WebP への変換だけで 244 KB になりました。
WebP 対応ブラウザはどれですか？Safari でも表示できますか？
2023年の時点で、Safari を含む主要なブラウザはすべて WebP に対応しています。たとえば Google Chrome、Safari、Firefox、Edge、Opera ブラウザは、WebP をネイティブでサポートしています。古いバージョンのブラウザを使う訪問者にも画像を表示したい場合は、PNG や JPEG へのフォールバックを有効にするとよいでしょう。
WebP 画像が表示されないときはどうすればよいですか？
WebP に対応していない古いバージョンのブラウザに備えて、PNG や JPEG などの従来のフォーマットへのフォールバックを有効にするとよいでしょう。たとえば、画像に <picture> タグを追加する方法と、Imagify のように画像を WebP に変換して <picture> タグでフォールバックを有効にできる WordPress プラグインを使う方法があります。<picture> タグを使うと、WebP に対応しているブラウザは dog.webp を表示し、対応していない古いバージョンのブラウザは dog.jpg に切り替えます。
WordPress で WebP 画像を使うには？
WordPress 5.8 以降は WebP 形式に完全に対応しているため、画像をメディアライブラリにアップロードしてコンテンツに挿入するだけで WebP 画像を使えます。ただし、既存の画像を WebP に変換するにはプラグインが必要で、Imagify、WebP Converter for Media、WebP Express、ShortPixel Image Optimizer などが使えます。たとえば Imagify なら、一括圧縮とあわせて、すべての画像をワンクリックで WebP に変換できます。
まとめ
WordPress で画像を WebP 形式で配信するのは、パフォーマンスを高める簡単な方法です。この次世代フォーマットは、訪問者に配信する画像のファイルサイズを小さくすることで、画質を損なわずに Core Web Vitals の改善に役立ちます！
WordPress も主要なブラウザも今では WebP に対応しているため、互換性を心配する必要はありません。Imagify や WebP Converter for Media のようなツールを使えば、WordPress のダッシュボードから直接、画像をこれまでになく簡単に WebP に変換できます。
パフォーマンスを高め、（たとえば遅延読み込みで）画像をさらに最適化するために、もう一歩踏み込みたいなら、WP Rocket を試してみてください。有効化と同時にパフォーマンスのベストプラクティスの80%を適用し、技術的な知識は必要ありません。さらに14日間の返金保証があるので、ウェブサイトの表示が速くなるのを目にすること以外、何のリスクもありません！
