まいどおおきに！おおもと(@so88qa)です！
この記事は、ワードプレス上の画像をWebPに変換させるプラグイン『WebP Express』の設定方法を簡単に解説した記事です。
WebPに変換するとどうなるの？
簡単に言うとめっちゃ画像が軽くなる
WebPにすると自分のサイトがどう変わるのか？というチェッカーが無料であるで自分のサイトをチェックしてください。
どうですか？画像をWebPに変換するとサイトがめちゃくちゃ軽くなったでしょ？
そんなすごい事が『WebP Express』をワードプレスに入れるだけで簡単にできちゃうんです♪
気になる人は最後まで記事を読んでくださいね♪
Web 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などを置き換えます。 |
2番の設定は「lazy load」が使えなくなるみたいので1番の設定でOKだと思います。
Web service
Web serviceはぶっちゃけ良くわかりません(笑)
何もチェックしなくて大丈夫です。
『WebP Express』の設定方法のまとめ
この記事は、ワードプレス上の画像をWebPに変換させるプラグイン『WebP Express』の設定方法を簡単に解説した記事でした。
WebPはGoogleが作成したモノでもあるので、導入するのは早い方がいいと思います。
簡単に導入できるので皆さんもこの記事を参考に導入してくださいね♪
＼ コメントを残す ／
ありがとうございます！むちゃ助かりました。