表示可能なブラウザで、軽量なWebP形式の画像を配信してくれるプラグイン「WebP Express」

最近のメジャーなウェブブラウザで表示が可能になった「WebP」形式の画像。今までは「png」形式よりも容量の少ない「jpg」形式の画像が主流でしたが、「WebP」形式は更に軽量な画像配信ができるので、ページの容量減による表示速度の向上が期待できます。

さらにWordPress5.8では、WebP形式の画像が正式にサポートされ、WebP形式の画像を直接アップロード・管理できるようになり、まさに主流となりつつあります。

しかしながら、現状WebP形式の画像を直接生成できる画像ソフトは少なく、ウェブツールなどを使って一旦変換する必要がありますから、まだまだ少し使いづらい部分があります。

【WebP Express】は過去・未来含め、「jpg」「png」形式の画像からWordPress上で「WebP」形式の画像を生成し、ブラウザの利用可否によって配信を判断してくれるプラグイン。今まで通りの形式の画像をアップロードすれば自動で「WebP」形式の画像を生成してくれるので便利です。

【WebP Express】プラグインの用途や機能

• アップロード済みの「jpg」「png」形式の画像から、「WebP」形式の画像を生成
• 今後アップロードする画像に対し、自動で「WebP」形式の画像を生成（要設定）
• 画像形式ごとのクオリティ（品質）設定が可能
• 過去画像に対して「WebP」形式の画像を生成
• 表示可能なブラウザでは「jpg」「png」形式の画像の代わりに、「WebP」形式の画像を配信

公式ページにも書かれている通り、このプラグインはGithub上にアップされているWebP形式の画像の生成および配信に必要なライブラリ（特定の機能を持つプログラム）を組み合わせて機能させているプラグインです。個人的には処理が少なく必要最小限な機能のみを持つプラグインなので、高機能な手組プラグインと比べて動作が軽い点でおすすめのプラグインです。

本ページを最後に編集したときの環境・バージョンなど

プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までに本記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。

プラグインを使用（試用）したテスト環境・公式ページなど

この紹介記事作成にあたって、試用（テスト）を行った環境、本記事で紹介するプラグインバージョン、現在配布されている最新バージョン、公式ページのリンク等は以下の通りです。

• テストサーバー：カラフルボックス
• WordPressのバージョン：5.7.1(5.8RCでも動作確認しました)
• PHPのバージョン：7.4.15(8.0でも動作確認しました)
• テーマ：HABONE(オリジナルテーマ)
• プラグインのバージョン：本記事で紹介しているバージョン 0.20.1 ／最新バージョン 0.25.9
• 公式サイト（wordpress.org上）：https://wordpress.org/plugins/webp-express/
• 公式サイト（作者サイト）：

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

• テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
  ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
  ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
• プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
• このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
• プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）

【WebP Express】プラグインの設定画面や表示画面の日本語化と翻訳

【WebP Express】プラグインは言語の変更に未対応ですので表示のまま設定することになりますが、次項の設定方法をご覧いただければ問題なく使用できると思います。

【WebP Express】プラグインのインストールと設定方法

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。

WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。

基本的な設定方法と使用方法

【WebP Express】の設定は管理画面から「設定」→「WebP Express」をクリックして行います。

たくさん項目がありますが、基本的には以下の部分にチェックを入れるのみで大丈夫でしょう。

「.htaccess rules for webp generation」は、WebP形式で配信できるブラウザからのアクセスかを判断して適切な画像を配信するための設定です。基本すべての項目にチェックを入れます。

続いて、下の方にある「Convert on upload」にチェックを入れ、今後アップロードする画像については自動的にWebP画像を生成するようにします。

画像アップロード時に処理が１つ追加され、環境によっては画像のアップロードに失敗することもありますので、その場合はチェックを外してください

また、「Convert on upload」オプションを外した場合、本プラグインでは個々の画像でWebP生成を行うことができないようですので、ある程度画像をアップロードした段階で「Bulk Convert（一括変換）」を行う必要があります（未WebP化されていない画像だけが一括変換されるので、こまめに行えばそれほど時間はかかりません）。

設定が完了したら、設定画面右上の「Save settings and force new .htaccess rules」をクリックして、以下のような完了画面が出れば設定完了です。

今までの画像に対してWebP形式の画像を生成するには

プラグインの設定画面から以下の部分を見つけ「Bulk Convert（一括変換）」をクリックします。

この処理には結構時間がかかりますので、余裕を持って作業するようにしましょう

１つ１つの画像の変換が行われ、最終行に「Done(完了)」と表示されれば完了です。

このプラグインで生成されるWebP形式の画像は、設定画面で特別な変更をしなければ、本プラグインフォルダ内に保存され、プラグインの削除と共に画像が削除されるようになっていますので、プラグイン削除後、再度インストールと有効化をしたときには、画像の再生成（Bulk Convert）が必要です。

編集などによる画像の変化に対し「未Webp」と判断されない点に注意

実際にいくつかのサイトで2021年7月17日現在使用していますが、メディアの編集画面でサイズ変更したり、何等かの方法で画像を入れ替えたりしてもWebPへの変換候補とはならないようです。

また、確認する限りでは、メディア一覧上で画像を削除した場合でも、生成済みのWebP画像が同時に削除されるという機能はないようです。

従って複数の画像に対して大きな編集をした際や、画像をたくさん削除した際には、一旦「Delete converted files」をクリックしてWebP画像を削除してから、再度「Bulk Convert」を行う必要があります。

この点については、改善されるといいなと感じる一方、画像をきちんとメンテナンスしてから変換していけば特に問題もないのでは？とも感じました。

すべての画像に対して変換される点に注意

このプラグインでは、一括変換の際、uploadsフォルダの中にあるすべての画像と、設定によりテーマフォルダの中にある画像すべてに対してWebP画像の生成が実行されます。

uploadsフォルダの中には

• 「-scaled」化後の画像に対する巨大な元画像
• メディア編集画面で編集する前の画像
• 以前に使っていたテーマやプラグインが生成したカスタムサイズの画像

など、実際にはサイト上で何も使用していない画像も含まれます

テーマについては、themesフォルダ内にあるすべてのテーマの画像が対象になります。

従って余分なファイルやテーマがあればあるほど一括変換に時間がかかりますので、整理を行ってから一括変換するようにしましょう。

【WebP Express】プラグインの便利な使い方・カスタマイズ方法など

このプラグインをより便利に使うカスタマイズ技、テストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない情報、発見した不具合などを紹介します。

WebPできちんと配信されているかを確認する方法

設定を行った後にページを表示して、ソース確認をしてみると、画像が今まで通りの「.jpg」や「.png」のままになっててあれ？と思うかも知れません（私もその一人です）。

これについては、公式ページ上できちんと解説されていますが英語で分かりにくいかと思いますので、図を示しつつできるだけ分かりやすく紹介させていただきます。

簡単に確認する方法

１．サイトの管理画面からプラグインを一時無効化します。

２．Google PageSpeed Insightsでサイトトップページや画像が使われているページの検証をしてみます。

３．以下の画像のように、「次世代フォーマットでの画像の配信」という項目が表示されていたら、WebPでの画像配信がされていないことが確認できます。

環境によってはキャッシュ（一時保存機能）が働いているかも知れませんので、図のような改善項目が表示されないようでしたら、時間をおいて試してみてください。

４．プラグインを有効化してください

５．一応「設定」→「WebP Express」を開き、「Save settings and force new .htaccess rules」ボタンをクリックして、下図のような画面が出て正常に更新されるかを確認してください。

６．もう一度、Google PageSpeed Insightsでサイトトップページや画像が使われているページの検証をしてみます。

７．３で表示されていた「次世代フォーマットでの画像の配信」という項目が表示されなくなれば、きちんとプラグインが動作していることになります。

デベロッパーツールを使ってきちんとソース上で確認する方法

１．プラグインを有効にし、きちんと設定した状態でトップページやその他の投稿などを開きます

２．キーボードの「F12」を押してデベロッパーツールを開きます

３．「Network」タブ（赤枠）部分をクリックした後、ページをリロードします。

４．ページ内の画像をクリックします（上図左の赤枠部分）

５．Headersタブをクリックしてスクロールしていくと表示される「content-type」が「image/webp」になっていれば、HTML上ではjpgなどで表記されていてもきちんとWebPで配信されています。

変換中画面に「None of the converters in the stack could convert the image. failed」と出るときは（考察）

私が管理するサイトでの一括変換中に、以下のようなエラーが出ました。

None of the converters in the stack could convert the image. failed

実際の画面がこちらです。

それまでいくつかのサイトで一括変換した際には何もなかったのでちょっとびっくりしました。

これらのファイルの状態をFTPクライアントで直接覗いて調べてみたところ、すべてファイル容量が「0(ゼロ)」のものでした。

なぜかすべて「png」形式のファイルです。さらに、それと同じものが「jpg」形式で複製されていました。サイトの管理画面上も、「jpg」形式のファイルとして認識されているようです（下図）。

エラーの出た画像が2020年7月と古いものなので、あくまでも想像の域を超えませんが、「png」形式のファイル作成日が「jpg」ファイルの作成日よりも古いことから、何かしらのプラグイン等を使って「png」形式の画像を「jpg」形式に変換したのではないかと推察します。

私の場合、このファイルは既にサイズ「0」でサイト内にも実態がありませんし、代替の「jpg」形式の画像がきちんと認識されているので、不要と判断してFTPで削除し、解決しました。

その他、公式フォーラムでは処理の問題などというやり取りがあるようですが、このエラーが出たときはサーバー内を確認してみるのも原因を探る方法の１つかも知れません。

また、このエラーが出だすと、変換が遅くなったり、ストップしたりすることがあるので、サーバーのCPU使用率を見てストップしているようでしたら一旦処理画面を閉じ、一括変換を再試行すると再開されます（エラーのあるファイルを削除しないまま再開すると最初の方はエラーだらけになります）。

移転後のサイトで画像が壊れたときの対処

すべてのサイトについてという話ではないと思いますが、私の所有するサイトで実際に起こったのでメモとして紹介しておきます。

移転後以下のような現象が発生しました。

• 管理画面のメディア一覧の画像サムネイルがすべて壊れている
• 表示画面の画像がすべて壊れている

ファイル・フォルダの移動に失敗したのかと、FTPで確認するも、画像は正しく残っていましたので、画像に対して何かをしているのはこのプラグインだけ。

そこで、一度プラグインの停止を行って確認したら、きちんと画像が表示されました。

このプラグインで何かが発生しているのは間違いないと確信し、再有効化してみたところ、問題なく表示されるようになりました。

プラグインの無効化→有効化で解決できてしまったので、何が要因なのかというところまでは突き止められませんでしたが、恐らく移転によってパーマリンク構造の不整合が起き、個別投稿ができなくなっていたのと関係がありそうです。

パーマリンクの不整合に関しては管理画面のパーマリンク設定を開いて何もせずに更新すれば解消されたのですが、このプラグインの紐づけはクリアできなかったようで、恐らくそれが原因でしょう。

プラグインを停止→再有効することでリフレッシュされたのだと想像します。

同じ現象が発生した方は一度試してみる価値はあると思います。

私の場合は、念のため、プラグインの設定画面から.htaccessへの記述を含めた設定の更新をして対処を終えました。

このページの更新履歴

更新日	更新内容
2021年 7月 9日	表示可能なブラウザで、軽量なWebP形式の画像を配信してくれるプラグイン「WebP Express」を公開しました
2021年 7月15日	変換中画面に「None of the converters in the stack could convert the image. failed」と出た事例と確認したこと、対処したことを追加しました
2021年 7月17日	実際に使用していて感じた「メンテナンス性」と「一括変換前の画像整理の必要性」について加筆しました。
2022年 8月 7日	サイト移転時に画像が表示されなくなってしまう現象の対処（メモ）を追加しました