WordPressサイトを高速化する方法の一つとして、アップロードする画像のファイルサイズを小さくするのは非常に効果的です。画像はウェブページのファイルサイズの約半分を占めていることが多く、ちょっとした改善でも大きな効果を期待できます。そして画像最適化に見逃せないのが、WebP（ウェッピー）です。
WebPは最新の画像形式で、画質を落とすことなくサイズを小さくすることができます。画像をWebP形式に変換する方法を学ぶことで、見た目を損なうことなくファイルサイズを25〜35%縮小することが可能です。
ほとんどのモダンブラウザとWordPress 5.8以上がすでにWebPをサポートしているのも安心です。今回は、このWebPに迫り、画像最適化に役立つ使用方法をご紹介します。
WebPとは
WebPはGoogleが画像を最適化する目的で開発した画像形式。JPEGやJPG、PNGといった一般的なファイル形式よりも圧縮率が高くなります（各画像ファイル形式とサイト速度の関係性についてはこちら）。
WebPは、ファイルサイズをできる限り小さくして、同じ画像ファイルを配信することに重点が置かれています。画像ファイルのサイズが小さくなることで、サイト訪問者に同じ体験を提供しながら、サイトの読み込みが高速化されます。
GoogleのWebP変換に関する調査では、WebP画像ファイルの平均サイズは以下のようになっています。
- 同等のJPEG画像と比較して25～34%小さい
- 同等のPNG画像と比較して26%小さい
また、画像最適化の余地がある場合、PageSpeed Insightsでは、WebPのような次世代フォーマットで画像を保存することが推奨されます。
では、GoogleのWebPファイル形式は、どのようにファイルサイズの縮小を実現しているのでしょうか。
WebPは、非可逆圧縮と可逆圧縮をサポートしているため、正確な縮小率はどちらを使用するかによって異なります。
非可逆圧縮の場合、ファイルサイズの縮小に予測符号化と呼ばれるものが使用されます。予測符号化は、動画コーデックのVP8に基づき、画像内の隣接ピクセルの値を使用して値を予測し、その差分のみを符号化します。
可逆圧縮には、WebP開発チームによる独自の高度な方法が使用されます。WebPの圧縮技術の詳細はこちらをご覧ください。
WebPをサポートするウェブブラウザ
当然ですが、WebP画像が動作するには、訪問者のウェブブラウザでサポートされていなければなりません。残念ながら、ブラウザのサポートは大きく発展する中、WebPの互換性はまだ万能とは言えません。
WebP画像は、次の主要ブラウザでサポートされています。
- Chrome（PCおよびモバイル）
- Firefox（PCおよびモバイル）
- Microsoft Edge
- iOSおよびmacOSSafari（macOS 11 Big Sur以降のみ）
- Opera（PCおよびモバイル）
本記事執筆時点では、Safariでは部分的にしかサポートされていません。
総合的には、インターネットユーザーの約95%がWebPをサポートするブラウザを使用しています。WebPは確かに圧倒的な支持を得ていますが、逆に言えば、5%の特に古いmacOSバージョンを使用するSafariユーザーには好ましくありません。この記事では、WebPに画像を変換しながら、すべての訪問者に優れたユーザー体験を提供するヒントをご紹介します。
画像ファイルのサイズ比較（WebP、JPG、PNG）
先でご紹介した通り、Googleのテストによると以下のとおりです。
- 同等のJPEG画像と比較して25～34%小さい
- 同等のPNG画像と比較して26%小さい
Googleの方法論については、それぞれ以下をご覧ください。
いずれのテストも、以下を含む1万1,000以上の画像に基づいています。
- レナ（画像処理の分野で有名なテスト画像）
- Kodakのフルカラー画像24点
- Tecnick.comの画像100点
- Google画像検索からの1万1,000以上の画像サンプル
WordPressでWebP画像を使用する方法
WordPress 5.8以降は、JPEG、PNG、GIF形式に並んで、WebPも標準で使用できるようになっているため、画像をメディアライブラリにアップロードして、コンテンツに追加可能です。もちろん、サードパーティプラグインは必要ありません。ほとんどの用途ではこれで十分です。
WordPress 5.8以降でWebP画像を使用する方法はこちらでご紹介しています。また併せて、WordPressのWebPサポートに関する注意事項もご覧ください。
先ほど触れた通り、5％のユーザー（主に古いmacOSのSafariユーザー）は、WebPをサポートしないブラウザを使用しています。コンテンツに追加されたWebP画像は、これらのユーザーには表示されないため、ブラウジング体験を損なうことになります。
また、WebP画像の生成は、カメラ、スマートフォン、オンライン画像ライブラリでデフォルトの画像ファイル形式であるJPG/JPEGほど取得が容易ではありません。さらにWordPressには、現状WebP形式への画像の自動変換機能もありません。
これにはプラグインで対処可能です。元の画像をWebPに変換しつつ、WebPをサポートしていないブラウではフォールバックとして変換前の画像を提供することができる画期的なプラグインが存在します。
例えば、JPEGファイルをサイトにアップロードすると、以下のようになります。
- JPEGファイルをWebPに変換し、Chrome、Firefox、EdgeでWebPバージョンを提供
- Safari（古いmacOSのバージョン）やWebPをサポートしていないその他のブラウザでは元のJPEGファイルを表示
これによって、すべての訪問者に画像を表示しながら、サイト速度も最適化することができます。
以下、Kinsta（およびKinsta CDN）と互換性のあるおすすめWebP WordPressプラグインを見ていきましょう。
MyKinstaの画像最適化機能
まず最初にご紹介するのは、厳密にはプラグインではありませんが、Kinstaの画像最適化機能です。
MyKinstaから利用でき、画像を最適化したWebPバージョンを自動作成し、画像ファイルのサイズが小さい方が訪問者に提供されます。
常に可能な限り小さなファイルが取得されるようにすることで、読み込み時間が即座に向上し、SEOとユーザー体験の両方を大幅に改善することができます。また、高性能CDNにより、さらにファイルが高速配信されます。
要件に応じてWebP画像の非可逆圧縮と可逆圧縮を選択でき、最適化をオンまたはオフにしてパフォーマンスの改善をテストすることも可能です。
画像最適化機能は、Kinstaをご利用のすべてのお客様にお使いいただけます。使用方法は以下のとおりです。
- KinstaでホストするWordPressサイトのメディアライブラリに画像をアップロードする
- MyKinstaにログインする
- 「WordPressサイト」＞（サイト名）＞「CDN」に移動
- 「画像最適化」セクションの「設定」をクリック
- 可逆圧縮または非可逆圧縮のいずれかを選択し、「設定を保存」をクリック
Kinstaをご利用でない場合は、ぜひ見本紹介セッションをご予約ください。この機能を無料でお試しいただけます。
可逆圧縮と非可逆圧縮
ファイルには、可逆圧縮または非可逆圧縮を選択できます。いずれも画像ファイルを圧縮し、メタデータを削除しますが、以下のような違いがあります。
- 可逆圧縮：画質に影響を与えることがない。速度よりも画質を重視する場合に適している。
- 非可逆圧縮：画質を損なう可能性あり。画質よりも速度を重視する場合に適している。
ShortPixel
ShortPixelは人気の画像最適化プラグインで、WordPressサイトにアップロードする画像のサイズを自動的に変更し圧縮することができます。
また、画像をWebPに自動変換し、WebPをサポートするブラウザに提供する機能もあります。
ShortPixelでは、最適化されたWordPress画像サイズを「クレジット」としてカウントします。そのため、複数の画像のサムネイルサイズを最適化するには、1つの画像に多数のクレジットを使用する可能性もあります。画像のファイルサイズに制限はありません。
ShortPixelのクレジットは制限なく必要に応じて複数のサイトに分散でき、サイトごとの制限もありません（すべてのサイトで同じアカウントを使用可能）。
WordPressでShortPixelを使ってWebP画像を配信するには、WordPress.orgからShortPixelをインストールし、APIキーを追加します（無料のShortPixelアカウントを作成すると取得できる）。
「一般」タブから、圧縮率や画像のリサイズの有無など、画像最適化の基本設定を行うことができます。
WebP画像を有効にするには、「上級者向け」タブを開きます。
- 「WebP Images」にチェックを入れる
- 「Deliver the WebP versions…」にチェックを入れる（「WebP Images」にチェックを入れると出現）
- 「Using the <PICTURE> tag syntax」を選択
- 「Only via WordPress hooks」はデフォルトのままにしておく
最後に設定を保存して完了です。
Kinstaでサイトをホストしている場合、Nginxのサーバー設定ファイルに関する警告メッセージが表示されます。このメッセージに遭遇した場合には、カスタマーサポートまでご連絡ください。
Imagify
Imagifyは、WP Rocket開発チームによる人気の画像最適化プラグインです。
WordPressサイトにアップロードした画像を自動的に圧縮してリサイズ。また、画像をWebPに変換し、WebPに対応したブラウザで提供することも可能です。
機能面では、ShortPixelに似ていますが、大きな違いは価格設定にあります。ShortPixelは画像ごとに課金され、画像ごとのサイズ制限がないのに対し、Imagifyは画像制限なしで、ファイルサイズ全体に応じて課金されます。
したがって、大きな画像を大量に最適化する必要がある場合には、ShortPixelの方が予算を抑えることができるかもしれません。反対に小さな画像を大量に最適化する場合には、Imagifyの方がお得になる可能性が高いです。
Imagifyには、月に最大25MBまで最適化可能な無料プランがあります。有料プランは1GBまでで月額4.99ドル、1回限りのクレジットで最大1GBで9.99ドルから。
なおShortPixel同様、サイト数には制限はありません。
Imagifyを使用してWordPressのWebP画像を配信するには、WordPress.orgからImagifyをインストールし、APIキーを追加します。
プラグインを有効化したら、「General Settings」で圧縮率を選択可能です。
WebP画像を有効にするには、「Optimization」セクションまでスクロールし、「WebP Format」セクションを見つけます。
- 「Create webp versions of images」にチェックをいれる
- 「Display images in webp format on the site」にチェックをいれる
- 「Use <picture> tags」を選択する
ShortPixel同様、Kinstaのお客様は、WebPキャッシュバケット用のNginxルールを設定する必要がありますので、カスタマーサポートまでご連絡ください。
Optimole
Optimoleもまた、自動的に画像を圧縮し、リサイズすることができるプラグインですが、ImagifyやShortPixelとは少し動作が異なり、以下のような特徴があります。
- CDN（Amazon CloudFront）経由で画像を提供
- リアルタイムのアダプティブ画像によって、各訪問者に適したサイズの画像を配信（小さな画面で閲覧しているユーザーには、Retinaディスプレイで閲覧しているユーザーよりも低解像度の画像を取得するなど）
このアプローチは、Cloudinary、imgix、KeyCDN Image Processingなどのリアルタイム最適化/操作サービスに似ています。
このリアルタイム画像最適化の一環として、WebP画像をサポートするブラウザを持つ訪問者にWebP画像を配信することも可能です。
無料プランでは、1ヶ月あたり約5,000人の訪問者に画像を配信できます。有料プランは、月額19ドル（～2万5,000人）から。
Optimoleを使用するには、WordPress.orgからプラグインをインストールし、APIキーで有効化します（無料のOptimoleアカウントを作成して取得可能）。
これによって、Optimoleが画像の最適化を行い、CDN経由で配信を開始します。WebPのサポートはデフォルトで有効になっているため、設定は不要です。
圧縮率やスケーリング動作などの設定を行うには、「メディア」＞「Optimole」を開き「Settings」タブを開きます。
CDN経由で画像を配信するため、Kinstaでサイトをホストしている場合、Nginxルールを設定する必要はありません。
まとめ
WordPressサイトの画像は、平均的なページのファイルサイズの大部分を占めています。画像のサイズを小さくすることができれば、ユーザー体験を損なうことなくサイトを高速化することができます。WebPは最新の画像形式で、JPEGやPNGと比べてファイルサイズが25%軽量になります。
インターネットユーザーの約95%は、すでにWebPをサポートするブラウザを使用しており、WordPressでもバージョン5.8以上であれば標準でWebPがサポートされています。WebPを利用しない手はありません。
しかし、ごく少数派のブラウザ、特に古いmacOSバージョンのSafariでは、まだWebPがまだサポートされていません。この問題に対処するには、プラグインを活用して画像をWebPに変換し、WebPをサポートしているブラウザにのみWebPバージョンを提供し、WebPをサポートしていないブラウザを使用している訪問者には変換前の画像を提供してください。
画像の最適化に関する包括的なヒントはこちらでご紹介しています。Kinstaのお客様は、MyKinsta組み込みの画像最適化機能を利用することで、圧縮されたWebP画像を自動生成し、ディスク容量の消費を抑えることができます。
WordPressサイトでのWebPの使用方法について、ご質問やご意見がありましたら以下のコメント欄でお聞かせください。
コメントを残す