WordPressの画像をWebPに変換&対応するプラグイン「WebP Converter for Media」の使い方。

2021-09-13
Wordpress

WebP Converter for Media_eyecatch

当サイトはGoogleが提供するスピード診断ツールのPageSpeed Insightsの改善できる項目に「次世代フォーマットでの画像の配信」がずっと出ていました。

jpegやpng形式の画像を使用していると出る項目で、AVIFやWebP形式の画像に差し替えればWebページが更に軽量になりますという話です。

この度Wordpressプラグインの「WebP Converter for Media」を導入することで解決できましたので、使い方をまとめました。

設定はほぼ必要無し!アップロード済みの画像も全てWebPに変換できます。

WebP変換プラグインWebP Converter for Mediaの使い方

今やjpeg形式、png形式の画像は古くなってきておりGoogleが新たに開発したWebPと呼ばれる新しい画像形式に変換することでWebページをさらに軽量化できます。

WebP画像の一番のデメリットが対応しているブラウザが少ないという点です。
最近では対応するブラウザも増えましたが、それでもWebPだけでWebサイトを構築すると一部の端末で画像が表示できなくなります。

そこで対応するブラウザには軽量なWebP形式を、非対応のブラウザには従来のjpeg、png形式を提供する必要があるのですが、この出し分けが結構面倒です。
WebP形式をアップロードしていない場合は新しく作る必要もあります。

紹介する「WebP Converter for Media」はこの面倒な作業を全て行ってくれます。

ココがおすすめ

  • 難しい設定が一切ない
  • アップロード済みの画像をWebPに一括変換できる
  • 元の画像は削除されない(変更もされない)
  • プラグインを削除(無効化)すれば元通り
  • 画像品質を75%~100%で調節できる
  • 対応しているブラウザにのみWebP画像を表示する
  • WordPressに同梱されている画像処理ライブラリを使用する

本来ならば、

  1. 今ある全ての画像をWebPに変換
  2. サーバーに全てアップロード
  3. .htaccessでWebPを出し分ける設定

と知識と莫大な時間が必要ですが、このプラグインは数十分で全て行ってくれます。

しかも会員登録もなく無料です...
WebP対応は面倒かつ需要がある作業なので他のプラグインでは有料オプションになっているものも多い中このプラグインは凄いです!

プラグインのインストール

では早速使ってみましょう!
動作環境ですが、GDライブラリを使うのでほとんどのサーバーで使えるはずです。
執筆時「WebP Converter for Media」は管理画面からインストールできました。

WebP Converter for Mediaの使い方_001

管理画面左メニュー>プラグイン>新規追加

管理画面左メニュー > プラグイン > 新規追加

に進み、検索欄に「WebP Converter for Media」と入力。
今すぐインストールして有効化すればOKです。

プラグインの設定

有効化したらプラグインの設定を確認しましょう。
設定画面はWordpress管理画面のメニューの中の設定にあります。

WebP Converter for Mediaの使い方_002

管理画面左メニュー>設定>WebP Converter

管理画面左メニュー > 設定 > WebP Converter

に進みます。

WebP Converter for Mediaの使い方_003

WebP Converter for Mediaの設定画面1

英語表記ですがほとんど感覚でお分かりいただけると思います。

執筆時はほとんどデフォルト設定で大丈夫でした。
ただList of supported directoriesにはthemesを含めた方が効果的なので要確認です。
変更点は/themesにチェックを入れるだけでOK!
あとは確認だけです。では詳しく見ていきましょう。

Image loading mode

画像の読み込みモードを選びます。
via.htaccessになっていることを確認します。
プラグインが自動的にwp-content内に.htaccessを作成してくれ、これによってWebP画像の出し分けができます。

List of supported files extensions

どの拡張子をWebPに変換&対応するかの設定です。
初期設定で「.gif」の設定が外れていますが、GIF画像はWebPに変換すると静止画になってしまいますのでチェックは入れないでください。

List of supported directories

どのディレクトリの画像をWebP対応にするかの設定です。
初期設定では/uploadsだけにチャックが入っていました。
多くの場合テーマにも画像が使われているので/themesにもチェックを入れます。
画像を多く使用するプラグインを使っている場合は/pluginsにチェックを入れてもいいかもしれませんが、不具合が出るかもしれません。

Conversion method

画像処理にどのライブラリを使用するかの設定です。
GDにチェックが入っていることを確認します。
一般的にWordpressではPHPのGDライブラリで画像処理をしていますのでGDのままでOKです。なお、サーバーによってはimagickライブラリが使えません。

List of supported output formats

次世代フォーマットにAVIFかWebPのどちらの形式を使用するかです。
WebPにチェックが入っていることを確認します。
(AVIFは近日使えるようになるようで未実装でした。)

WebP変換の画質と保存設定

WebP Converter for Mediaでは画像の生成時のクオリティーの設定や、どのような画像を保存するかの設定も出来ます。

WebP Converter for Mediaの使い方_004

WebP Converter for Mediaの設定画面2

Images quality

WebP(AVIF)画像を生成するときの画像品質を75%~100%で選ぶことが出来ます。
100%が一番高画質、75%が低画質です。
後述する一括変換を使えば後から圧縮率を変更することもできます。

デフォルトの推奨値は85%です。
こだわりが無ければ85%のままでOKです。

Image qualityの参考

360×180pxの画像でファイルサイズを比べてみました。

  • オリジナル画像サイズ(jpg):43.66KB
  • 100%:23.93KB
  • 90%:11.19KB
  • 85%:9.04KB

推奨値の85%でもファイルサイズが1/4以下になりました!
WebPは軽いですねぇ・w・

当サイトでは画像アップロード前に圧縮、アップロード後にプラグインによって圧縮と2段階で圧縮済みでしたので90%にしました。
(後述しますが100%ではサーバーのメモリーエラーが出てしまいましたので。)

Extra features

生成する画像について設定できますが、初期設定のままでOKです。

・Automatic removal of~:チェックする。
オリジナルの画像(jpeg、png)よりもWebPの方が画像サイズが大きくなった場合に削除するかどうかの設定。

・Browser Caching for~:チェックする。
ブラウザキャッシュの設定です。WebPに関してはほとんど問題は起きません。

・Keep images metadata~:チェックしない。
EXIFなどのメタデータ(位置情報や撮影機材の情報)を保存するかどうかの設定。若干画像サイズも大きくなりますので保存しない方が良いです。

・Enable cron to automatically~:チェックしない。
アップロード時に画像処理できるようにする設定?
・Enable cron to convert~:チェックする。
アップロード後に画像処理できるようにする設定?
↑よく分かりませんが、新規画像をWebPに変換するタイミングだと思います。

Log errors white~:どちらでも
画像変換のログ保存をするかどうかです。自分でデバッグしないのであればオフで良いと思います。

アップロード済み画像をWebPに一括変換する

設定項目が長くなってしまいました。
続いて既存の画像を全てWebPに変換する方法です。

WebP Converter for Mediaの使い方_005

設定画面から既存画像を全てWebPに変換できる

とはいってもRegenerate imagesの項目で一発変換できます。
Force convert all images againのチェック後、Regenerate Allを押せばOKです。

設定した画質やその他の設定内容でアップロード済みの画像が全て変換されます。
※元の画像は残ります。WebP画像が新規作成されます。

WebP Converter for Mediaの使い方_006

変換終了後の画面

変換中は進捗状況を示す緑色のバーが表示されます。
100%になる前にページを閉じると中断されてしまうので閉じないように注意です。
設定を変更した場合は一度保存しないと反映されないのでお忘れなく。

サイトにもよりますが、数分~数十分程度で変換が完了します。

WebP Converter for Mediaの使い方_007

uploads-webpcにWebP画像が作成される

変換が終了するとwp-content内に「uploads-webpc」というWebP画像が保存されたフォルダと、この画像を出し分ける設定が書かれた「.htaccess」が生成されます。

元の画像は「uploads」に保存されているので、全く干渉していないのが良いです。

WebサイトでWebPが読み込まれるか確認する

変換が終了すればWebP変換&対応作業は終わりです。おつかれさまでした。

とはいえ作業後は確認して満足感に浸りたいところですw
なのでWebP画像の確認方法も書いておきます。

本当にWebPが読み込まれているかどうかは目で見ても分かりませんので...
(それくらい画像が劣化していない証拠でもありますが。)

注意ポイント

.htaccessで画像を出し分けるので反映されるまで少し時間がかかります。
プラグインの設定画面を閉じてから少し時間をおいて確認してください。
別途キャッシュクリアも行ってください。

長くなったので別の記事にしました↓

WebP Converter for Mediaで発生したエラー

最後にこのプラグインで確認出来たエラーについて書いておきます。

Server configuration error

ローカルに構築したXAMPPで試したところServer configuration errorが出ました。

WebP Converter for Mediaの使い方_008

設定画面に出るエラー

WebP Converter for Mediaは画像処理にGDライブラリかImagickライブラリを使用します。サーバーでこのどちらかが使えない場合は設定画面上部に警告が出ます。

ほとんどのレンタルサーバーではどちらかのライブラリが使えます。
有効化されていない場合などは稀かと思います。
どちらにしてもプラグイン側の問題ではなくサーバー側の問題です。

Out of Memory

設定でImage qualityを95%以上に設定した後、既存の画像をWebP画像に変換している最中にOut of Memoryが出ました。

WebP Converter for Mediaの使い方_009

画像変換中に出たエラー

サーバーのメモリ不足が原因です。
画像処理は負荷がかかるのでサーバーのスペックによってはこのエラーが出ます。

サーバーのメモリ不足で画像の一括変換が出来ない場合は、画質設定を70%などに下げるか、プラグインの画質設定の下にある「Automatic removal of WebP files larger than original」あたりのチェックを外して処理を軽くして試してみて下さい。

他のプラグインを全部停止して試してみたのですが、これは効果なしでした。
サーバーリソースを確認してみると画像処理中でも15%しかメモリを使っていなかったので、プラグイン1つあたりで使えるメモリ量は決まっているのかもしれません。

サーバーのメモリー設定が適切でどうやってもこのエラーが出てしまう場合はサーバースペックを引き上げるしかないです。
とはいえ画質設定がデフォルトの85%の場合はそんなにメモリを食わないはずです。

まとめ

WordPressのプラグイン「WebP Converter for Media」の使い方でした。

今までWebPに対応しているブラウザはChromeとAndroid端末ぐらいしかなかったのですが、最近はIOSのSafariもWebPに対応しました。
IEなどのWebPに対応していないブラウザに対してはこれまで通りjpeg、png画像が表示されますので導入しておいて損はないと思います!

Webページで動画の次に重たいのが画像なのでWebPを使えば体感できるほどページが高速になります・w・

なにより「次世代フォーマットでの画像の配信」がプラグイン1つ1クリックで解決できるとは思っていませんでした。製作者の方に感謝です。

-Wordpress
-

ありがとうございました。
良かったらシェアしてネ・w・

© 2022 ソロ学