WordPressプラグイン「WebP Express」で出来ること

WordPressサイトを制作していると、意外とサイトの表示速度に影響するのが「画像」です。

特に、

JPG

PNG

などの画像を大量に使用しているサイトでは、画像のファイルサイズが大きくなり、ページの読み込みが遅くなることがあります。

そこで使えるのが、WordPressプラグインの**「WebP Express」**です。

今回は、

WebP Expressを導入すると何ができるのか？

について紹介します。

WebP Expressとは？

WebP Expressは、WordPress内のJPEG・PNG画像などからWebP画像を生成し、対応ブラウザへ配信するためのプラグインです。

WebP（ウェッピー）は、Webサイトで使われる画像フォーマットの一つです。

画像を軽量化できれば、ページ読み込み時に転送しなければならないデータ量を減らせるため、サイトの表示速度改善につながります。

WordPressサイトでは画像を何十枚、何百枚と使用することもあるので、画像最適化はかなり重要です。

① JPG・PNG画像をWebP化できる

WebP Expressの中心となる機能が、

JPEG・PNG画像からWebP画像を生成すること

です。

例えば、

image.jpg

という画像がある場合、その画像を元に、

image.jpg.webp

などのWebP画像を生成して利用できるようにします。

そのため、

「サイト内の画像を軽量化したい」

という場合に便利です。

② すでにアップロードしている画像も一括変換できる

WebP Expressは、新しく追加する画像だけでなく、すでにWordPress内に存在している画像をまとめてWebP化することもできます。

管理画面からBulk Convert（一括変換）を実行できるほか、WP-CLIを使った変換にも対応しています。

例えば、すでに100枚以上画像を使用しているサイトで、

「今から全部WebPにしたい」

となった場合。

1枚ずつ画像編集ソフトや変換サイトでWebPにするのはかなり大変です。

こういった既存サイトの画像最適化にもWebP Expressは使えます。

③ ブラウザに合わせてWebP画像を配信できる

ここもWebP Expressの重要なポイントです。

単純にWebP画像を作るだけではなく、WebPを表示できるブラウザにはWebPを配信し、それ以外では元のJPEG・PNGを利用する仕組みを構成できます。

つまり、

元画像

↓

image.jpg

を残しながら、

WebP版

↓

image.jpg.webp

も用意するイメージです。

そのうえでブラウザの状況に応じて適切な画像を配信します。

「WebPに変換したら元画像が全部消える」

という仕組みではありません。

④ HTMLを書き換えてWebPを配信する方法もある

WebP ExpressにはWebPをブラウザへ届ける複数の方法が用意されています。

設定によってはHTMLを変更し、pictureタグなどを利用してWebP画像を配信する方法も選択できます。

WebP Expressが少し難しく感じる理由もここにあります。

ただ、

「画像をWebPに変換するだけのプラグイン」

ではなく、

どうやってWebP画像をブラウザに表示させるのかまで設定できるプラグイン

ということです。

⑤ 変換方法を選択できる

WebP Expressでは「WebPをどうやって生成するのか」についても複数の方法が用意されています。

WebP Convertというライブラリが使用されており、ローカルでの変換方法として、

Imagick

cwebp

vips

GD

などに対応しています。

ただし、どの方法が利用できるかはサーバー環境によって異なります。

そのため、

「プラグインを入れたのにWebPに変換されない」

という場合は、プラグイン自体ではなくサーバー側の変換環境や設定が原因になっている可能性もあります。

WebP Expressを入れるだけでは動かない

ここは注意が必要です。

WebP Expressは、

インストール → 有効化

だけですべて完了するプラグインではありません。

公式のインストール手順でも、プラグインを有効化した後に設定し、正常に動作しているか確認することが案内されています。

つまり、

インストール

↓

有効化

↓

設定

↓

WebP変換

↓

実際にWebPが配信されているか確認

というところまで行う必要があります。

WebPに変換されたか確認することも重要

WebP Expressを設定したら、

「WebPファイルが生成されたからOK」

で終わらせない方がいいです。

重要なのは、

実際にWebサイトを開いたときにWebP画像が読み込まれているか

です。

Chromeのデベロッパーツールを開いて、

Network

↓

Img

などから画像を確認すると、実際に読み込まれている画像を確認できます。

キャッシュ系プラグインやCDNなどを使用しているサイトでは、設定変更後も古いキャッシュが残ることがあるため、実際の配信状態まで確認する習慣をつけておくと安心です。

WebP Expressを使うメリット

WebP Expressを利用する大きなメリットは、

既存のWordPressサイトでも画像最適化を導入しやすいこと

だと思います。

例えば100枚のJPEG画像がすでに使われているサイトで、

画像をダウンロード

↓

WebPへ変換

↓

WordPressへ再アップロード

↓

HTMLやCSSの画像パスを変更

と手作業で対応するのは現実的ではありません。

WebP Expressなら既存画像からWebPを生成し、WebP対応ブラウザへの配信まで管理できます。

特に、

WordPressサイトを軽量化したい

JPG・PNG画像が大量にある

既存サイトをWebP対応したい

画像を1枚ずつ変換したくない

という場合には便利です。

ただし「WebPにすればすべて解決」ではない

ここは勘違いしない方がいいポイントです。

WebP Expressを入れて画像をWebP化したからといって、それだけでサイト高速化が完了するわけではありません。

例えば、

必要以上に大きな画像を使用している

画像を大量に読み込んでいる

JavaScriptが重い

CSSが肥大化している

外部スクリプトが大量にある

サーバーのレスポンスが遅い

といった問題があれば、別途改善する必要があります。

WebP Expressはあくまで、

「画像最適化を行うための選択肢の一つ」

と考えた方がいいでしょう。

まとめ

WebP Expressを使うことで、主に次のようなことができます。

JPEG・PNGからWebP画像を生成する

既存画像をまとめてWebP化する

WebP対応ブラウザへWebP画像を配信する

元のJPEG・PNGを残しながら運用する

複数の変換方式から環境に合った方法を利用する

WordPressサイトの画像最適化を効率化する

WordPressサイトでは、デザインやコードだけでなく、

「画像をどの形式・サイズで配信するか」

もパフォーマンスを考えるうえで重要です。

僕自身、以前は「画像が表示されていれば問題ない」と考えていました。

しかし、サイト制作をしていくと、画像の容量やフォーマット、読み込み方法まで考える必要があることが分かってきました。

特に画像の多いWordPressサイトを制作・運用しているのであれば、

WebP Expressのような画像最適化プラグインが何をしているのか

まで理解しておくと、サイト高速化について考えるときにも役立つと思います。