【WordPress】プラグイン「WebP Express」でWebP画像へ対応

WebPについて

現在、WordPress上から画像をアップロードする場合、多くの方が、JPEG画像やPNG画像をアップロードされているのではないでしょうか？

私も、アップロードする画像は、ほぼJPEG画像かPNG画像です。

ただ、最近はGoogleが開発しているWebP（ウェッピー）という形式の画像が注目を浴びており、
JPEG画像やPNG画像と比べて容量が20～30%ほど削減できると言われています。

画像を軽量化することにページの読み込み速度も改善されるのでSEO効果もあり、Google自身もWebPを推奨しています。

また、Google製の[ PageSpeed Insights ]でサイトの測定を行うと、
JPEGやPNGやGIF画像などを使用している場合、「改善できる項目」に「次世代フォーマットでの画像の配信」と表示されます。

この測定結果を見るだけでも、かなりの軽量化が見込めそうですね。

ただ、全画像WebPに変換してアップロードするのは結構手間です。
過去に投稿済みの記事の画像まで含めると、対応しきれません。

そこで、便利なのが「WebP Express」というプラグインです。

WebP Expressの設定方法

まずは、WordPressの管理画面上から該当プラグインを検索して、インストール→有効化まで行います。

有効化まで完了すると、管理画面左メニューの「設定」→「WebP Express」と遷移して下さい。
以下のような設定画面が表示されます。

こちらの画面で諸々の設定を行っていきます。

と言っても、基本的な設定方法は、
■「Operation mode」で「Varied image responses」を選択
■「Alter HTML」にチェック
になります。

この設定により、通常の<img>タグではなく<picture>タグが設定され、
WebP対応のブラウザであればWebP画像が、WebPに対応していないブラウザであれば投稿時の形式の画像が表示されます。
※主要ブラウザである、Chrome、Firefox、Edge辺りは、WebPに対応しています。

このような感じでタグが出力されます。

<picture>
<source srcset="https://deep-blog.jp/engineer/wp-content/webp-express/webp-images/doc-root/engineer/wp-content/uploads/2019/06/konnohachimangu.jpg.webp 2000w, https://deep-blog.jp/engineer/wp-content/webp-express/webp-images/doc-root/engineer/wp-content/uploads/2019/06/konnohachimangu-300x200.jpg.webp 300w, https://deep-blog.jp/engineer/wp-content/webp-express/webp-images/doc-root/engineer/wp-content/uploads/2019/06/konnohachimangu-768x511.jpg.webp 768w, https://deep-blog.jp/engineer/wp-content/webp-express/webp-images/doc-root/engineer/wp-content/uploads/2019/06/konnohachimangu-500x333.jpg.webp 500w" sizes="(max-width: 2000px) 100vw, 2000px" type="image/webp">
<img src="https://deep-blog.jp/engineer/wp-content/uploads/2019/06/konnohachimangu.jpg" alt="xxxxxxx" width="2000" height="1330" class="alignnone size-full wp-image-14960 webpexpress-processed" srcset="https://deep-blog.jp/engineer/wp-content/uploads/2019/06/konnohachimangu.jpg 2000w, https://deep-blog.jp/engineer/wp-content/uploads/2019/06/xkonnohachimangu-300x200.jpg 300w, https://deep-blog.jp/engineer/wp-content/uploads/2019/06/xkonnohachimangu-768x511.jpg 768w, https://deep-blog.jp/engineer/wp-content/uploads/2019/06/xkonnohachimangu-500x333.jpg 500w" sizes="(max-width: 2000px) 100vw, 2000px">
</picture>

画像枚数が少ないサイトであれば大きなメリットは無いですが、
大量に画像をアップロードされる方にはおすすめのプラグインです。

また、[ ページまるごとWebP変換・効果測定 ] という便利なサイトもあります。
WebPに対応することでどのくらい軽量化できるかを計算してくれるツールです。

興味のある方は、こちらのツールで、WebPに対応することでどのくらい効果があるかを見積もった上で、導入を決めてみてはいかがでしょうか。