ここでは、Wordpressで運営しているウェブサイトの画像を、簡単にWebP形式に変換して配信できるおすすめのプラグインを紹介していきます。
画像圧縮やリサイズ機能もあるもの、WebP化専用のプラグインもありますので、よろしければ参考にしてみてください。
おと画像をWebPに変換して配信する理由
ウェブサイトの表示速度が、年々重要になっているからです。
具体的には、ユーザーエクスペリエンスを損なうという点ですね。
有名な話ですが、「サイトの表示時間が1秒から3秒に落ちると直帰率が32%上昇する」ということがあります。
他にも、検索順位にも悪影響で、SEOの点でもマイナスに作用する可能性があります。
実際に2018年にGoogleは以下のように発表しています。
一部翻訳引用：Using page speed in mobile search ranking
人々はできるだけ早く質問に対する回答を見つけることができるようにしたいと考えています。研究によれば、人々はページのスピードを本当に気にしています。スピードはしばらくの間ランク付けに使用されていましたが、その信号はデスクトップ検索に集中していました。今日では、2018年7月からページ速度がモバイル検索のランキング要素となることを発表しています。
そこで、コンテンツ内に多く存在している”画像”を軽量化する必要性から、「WebP」「JPEG200」「JPEG-XR」などの次世代フォーマットを使用する必要性が出てきました。
実際に、Googleがページの読み込み時間の短縮方法を提供している「PageSpeed Insights」においても、画像の次世代フォーマットの使用をすすめていますよね。
おとそんな画像の次世代フォーマットの中でも、googleが開発した「WebP（ウェッピー）」は、対応しているブラウザも豊富なため、主流となっています。
とはいえ、すでに運用しているサイトの画像をひとつひとつ変更していくのはとても面倒ですよね。
私自身も、重い腰を上げてWebP対応しようと動き出しました。
WebP変換・配信は、Wordpressのプラグインを使えば、それほど大変な作業ではありませんでした。
おとWebP配信対応の違い
プラグインを選ぶ前に、ウェブサイトにWebP形式で表示する方法について簡単にお伝えしておきます。
画像のWebP配信の方法は、大きく分類すると次の2つの方法になります。
- .htaccessにリライトルールを追加する方法
- <picture>タグを使用する方法
- ブラウザによって画像URLを動的に変化させる
①は、閲覧者のブラウザの種類やバージョンを判断して、可能であればWebP形式の画像URLへリダイレクトするよう.htaccessに記述する方法です。
②は、<img>タグを<picture>タグで囲むなど、HTMLを変更する方法です。
具体的には次のような記述になります。
<source type=”image/webp” src=”https://hogehoge.com/image/photo.webp”>
<img src=”https://hogehoge.com/image/photo.jpg”>
</picture>
③は、閲覧者のブラウザの種類やバージョンを判断して、画像のURLそのものをjpegなどの元画像ではなく、webpファイルへとHTMLを動的に出力する方法です。
CDNなどを利用していたり、Webサーバーの環境などの事情から、①または②の方法を取れない場合でも対応が可能です。
WebP変換・対応プラグインは、それぞれ対応できる方法に違いがあったり、元の画像ファイルを事前にWebPファイルへ変換しておかなければならないものや、その都度WebPファイルを作成してくれるものなどの違いがあります。
おとWebPへ変換・対応できるプラグイン4つを紹介
おすすめできる順に紹介していきたいと思います。
こちらで紹介しているプラグインはすべて、「既存画像の一括WebP変換機能」「画像のアップロード時に自動WebP変換機能」がありますので、別途WebサービスなどでWebP変換する必要はありません。
おとWebP Express
| 対応ファイル形式 | jpeg・png |
|---|---|
| WebP配信方法 | ・.htaccessリライトルール ・<picture>タグ対応 ・HTMLへ画像URLの動的出力 |
| 対象ディレクトリ | ・/uploads ・/themes ・すべてのコンテンツ |
| WebP一括変換機能 | 有 |
| アップロード時の自動変換機能 | 有 |
| WebP圧縮率変更 | 可 |
WebP変換・配信に特化したプラグインで、画像の圧縮やリサイズ機能はありません。
「.htaccessによるリダイレクト」だけでなく、「<picture>タグを使用する方法」、「画像ファイルのURLを動的に変更する方法」の3つがあり、.htaccessを使った方法と、もうひとつの方法を併用することもできるので、なんらかの要因でうまくWebP配信できなかったときに、もうひとつの方法で配信されるので、安心感があります。
他のプラグインと違うところは、事前にWebP画像を作成していなくても、ウェブページにアクセスがあったタイミングでWebP形式のファイルへ自動変換してくれるよう設定もできるところです。
また、WebPのブラウザキャッシュ設定にも対応してくれます。
インストールしてデフォルト設定のままでも、.htaccessでリダイレクトする方式でWebP配信できてしまうので、とりあえずWebP対応したいという方にもおすすめです。
デメリットとしては、細かな設定ができるのに、説明がわかりにくいという点だけです。
ただ、設定できる項目としては他のプラグインよりもかなり多いです。
おとEWWW Image Optimizer
EWWW Image Optimizerプラグイン公式ページ
| 対応ファイル形式 | jpeg・png |
|---|---|
| WebP配信方法 | ・.htaccessリライトルール ・<picture>タグ対応 ・javascript対応 |
| 対象ディレクトリ | ・/uploads |
| WebP一括変換機能 | 有 |
| アップロード時の自動変換機能 | 有 |
| WebP圧縮率変更 | 不可 |
画像圧縮・リサイズしてくれる有名なプラグインで、WebP変換機能もあります。
こちらも「.htaccessによるリダイレクト」のほか、「<picture>タグを使用する方法」、「javascriptを使った方法」など複数のWebP配信方法に対応しています。
設定項目が少なく、初心者の方でも扱いやすいのが特徴。
通常の投稿画像を圧縮するのに利用している人も多く、WebP対応のために新たにプラグインを導入する必要がないというのがメリットです。
また、有料になりますがgif形式のWebP配信にも対応しています。
デメリットとしては、画像の圧縮率の指定ができないことと、WebP変換の対象が/uploadフォルダに限定されるので、テーマファイルなどに含まれる画像についてはWebP対応することができないことです。
おとWebP Converter for Media
WebP Converter for Mediaプラグイン公式ページ
| 対応ファイル形式 | jpeg・png |
|---|---|
| WebP配信方法 | ・.htaccessリライトルール ・その他（パススルー） |
| 対象ディレクトリ | ・/uploads ・/themes ・/plugins |
| WebP一括変換機能 | 有 |
| アップロード時の自動変換機能 | 有 |
| WebP圧縮率変更 | 可 |
こちらはWebP対応専用のプラグインです。
「.htaccessによるリダイレクト」と「パススルー（.htaccessやNginxに影響を与えない方法）」のどちらかの方法でWebP配信されます。
他のプラグインと違うのは、WebP変換対象にgif形式の画像も含まれるという点です。（gifアニメーションは静止画になってしまいます）
WebPのブラウザキャッシュにも対応することができ、ひととおりの機能が揃っているプラグイン。
ただ、使用している環境に影響するのか、使用しているテーマによっては全く動かないということがありました。
Imagify
| 対応ファイル形式 | jpeg・png・png |
|---|---|
| WebP配信方法 | ・.htaccessリライトルール ・<picture>タグ対応 |
| 対象ディレクトリ | ・/uploads |
| WebP一括変換機能 | 有 |
| アップロード時の自動変換機能 | 有 |
| WebP圧縮率変更 | 可 |
EWWW Image Optimizerと同じく、画像圧縮・リサイズが主なプラグイン。
他と大きく違うのが、月に20MBの画像しか処理できないという点です。
それ以上の容量を処理するためには、サブスクに加入する必要があります。
そのため、既に運営しているWordpressサイトで利用しようとしたとき、既存の画像を圧縮・WebP変換しようとすると、20MBを超える可能性が高いです。
すでに画像圧縮にImagifyを使っている方がWebP対応するという場合におすすめです。
画像圧縮やリサイズしてくれるプラグインを新規に導入するというのであれば「EWWW Image Optimizer」がおすすめです。
機能面でも、WebP対応方法は、「.htaccessによるリダイレクト」と「<picture>タグ」のみ、画質の選択は3段階のみ、その他WebPに関する設定項目が最も少なく、あえてこのプラグインを選ぶ必要性は低いかなと思います。
まとめ
次世代画像フォーマットへの対応は、PageSpeed Insightsのスコア改善に有効なことから、いずれは対応せざると得ません。
いかに簡単に、トラブルなく対応するかになりますが、簡単にON/OFFできるという点から、プラグインを利用するというのが効率的かと思います。
4つのプラグインを紹介しましたが、それぞれ特徴をお伝えしてきましたが、初心者から上級者まで対応できるのが「WebP Express」、画像圧縮・リサイズで利用していて、新たにプラグインをインストールしたくないという人は「EWWW Image Optimizer」を使うのが良いかと感じました。
特別こだわりがなければ、この2つのプラグインのどちらかを利用すればトラブルなくWebP変換・対応できるはずです。