画像をWebPに変換させるプラグイン『WebP Express』の設定方法を簡単に解説!

2020 8/09

まいどおおきに！おおもと(@so88qa)です！

この記事は、ワードプレス上の画像をWebPに変換させるプラグイン『WebP Express』の設定方法を簡単に解説した記事です。

ママ

WebPに変換するとどうなるの？

おおもと

簡単に言うとめっちゃ画像が軽くなる

WebPにすると自分のサイトがどう変わるのか？というチェッカーが無料であるで自分のサイトをチェックしてください。

ページまるごとWebPファイル変換

ページまるごとWebP変換・効果測定あなたのWebページにWebPを導入するとどのくらいデータが軽くなるのかシミュレートし、変換されたWebP画像を一括ダウンロードできます。

どうですか？画像をWebPに変換するとサイトがめちゃくちゃ軽くなったでしょ？

そんなすごい事が『WebP Express』をワードプレスに入れるだけで簡単にできちゃうんです♪

気になる人は最後まで記事を読んでくださいね♪

Web Expressの設定方法

おおもとブログでの設定は次の画像の通りです。

WebP Expressの設定項目は

WebP Expressの設定項目

Operation mode
General
Redirection rules
Conversion
Alter HTML
Web service

と大きく6つの設定項目があります。次にこの6つの設定項目を簡単に解説していきますね♪

Operation mode

Operation modeはWebP Expressがどのような動作に対応させるのか？と言う項目です。

Operation modeは「初期設定から変更しない」でください。

General

GeneralはWebP Expressの全般設定です。

Generalは「初期設定から変更しない」でください。

Redirection rules

Redirection rulesはWebP Expressのリダイレクト規制設定です。

Redirection rulesはサーバーとテーマによって変わってくる内容ですが、「全チェック」で問題ないと思います。

Conversion

Conversionは画像の変換方法です。WebP Expressプラグインでの圧縮率などを変更する事ができます。

Conversionは画像の圧縮率の絡みから「初期設定から変更しない」で問題ないと思います。

ただ、Conversionの一番下にある

Convert on uploadをチェック
Bulk convert ボタンを押して画像を変換

をしないと、画像がWebPに変換されないのでWebP Expressを入れたら必ずやってください。

Alter HTML

Alter HTMLはWebPをサポートするブラウザにWebP画像が提供されるようにHTMLコードが変更する為の設定です。

この設定をしなければConversionの設定で画像をWebPに変換しても相手方にWebP画像でサイトを見る事ができません。

ここでの設定は

Alter HTML?にチェック
What to replaceのどちらかにチェック

を入れるだけです。

What to replaceはWebPを提供する方法を設定する項目です。

What to replaceは2つの設定があり

Replace <img> tags with <picture> tags, adding the webp to srcset
Replace image URLs

です。

1番はimgタグをpictureタグに置き換えてWebPを提供する方法

2番は画像のURLを置き換える方法

です。

	方法1：<img>タグを<picture>タグで置き換える	方法2：画像のURLを置き換える
使い方	<img>タグを<picture>タグで置き換え、2つの<source>タグを追加します。 1つは元の画像用で、もう1つはwebp画像用です。 webpをサポートするブラウザーは、type属性が「image / webp」に設定された<source>タグを選択します。画像タグをサポートしていないブラウザでpicturefill.jsを動的に読み込むために、オプションで小さなjavascriptを追加できます。このライブラリを使用しています。詳細については、こちらをご覧ください。	見つかった画像のURLを置き換えます。このライブラリを使用しています。詳細については、こちらをご覧ください。
ページキャッシュ	すべてのブラウザに同じHTMLが提供されるため、ページキャッシングで最適に動作します。	ページキャッシュでは機能しません – 各ページの2つのキャッシュバージョンを維持できるCache Enablerプラグインを使用している場合を除きます。注：Cache EnablerにはHTMLの変更もありますが、その実装には制限があります。たとえば、インラインスタイルの背景画像を置き換えず、すべての一般的な遅延ロード属性を検索しません。また、エッジケースでいくつかの問題があります。このため、Cache Enablerの場合でも、WebP ExpressでHTMLの変更をアクティブにすることをお勧めします使用されている。それを行うことで、両方のプラグインがうまくいきます（WebP Expressが最初に来ます）。少なくともCache Enablerの制限は考慮されます。ただし、キャッシュイネーブラーが本来すべきでないものを置き換えたり、クラッシュしたりするエッジケースは解決しません。
スタイリングとjavascript	HTML構造が変更されたために破損する場合があります。「div> img」などのセレクタは、現在の親が「picture」であるため、画像と一致しなくなります。ただし、「div img」などのセレクターは引き続き機能します。幸い、picture要素はスタイルを設定することを意図していません-含まれているimg要素をターゲットにする必要があります。	問題はありません
包括性	<img>タグのみを置き換えます-他の画像は変更されません	非常に包括的な。インラインスタイルの画像、<div>または<li>タグで設定された遅延ロード属性の画像URLなどを置き換えます。