WordPressを使ってウェブサイトを作るならほぼすべての人がお世話になると言っても過言ではない必須級プラグインの「EWWW Image Optimizer」。
この記事では「EWWW Image Optimizer」の有効化から使用できるようにするまでの手順を解説します。
また、「EWWW Image Optimizer」におけるWebPの配信方法についてもあわせて手順を解説しています。
「EWWW Image Optimizer」を最大限活用し、サイトの表示速度を向上させましょう！
プラグインを有効化するとこんな画面が・・・
プラグインを有効化した後設定をしようとすると一番初めはこんな表示が出てきますが、
結局あとでちゃんとした設定画面で設定し直すので、てきとうに「次へ」でOKです。
EWWW Image Optimizerを使えるようにするための手順＋WebPの配信方法の設定
設定を全て行うと以下の画像のようになります。詳しい手順は画像の後に記載しています。とりあえずこんな感じにすればいいということがわかってもらえればOKです。
正直、設定項目もそれほど多くなく、2，3分あれば簡単に終わってしまいます。
WebPの配信方法だけはよくわからない場合戸惑うかもしれませんが、やること自体は少なく別に難しくないので安心してください。
以下が「EWWW Image Optimizer」の設定手順です。
- 手順1「Enable Ludicrous Mode」をクリックして、詳細な設定変更ができるようにします。
- 手順2「メタデータを削除」にチェックを入れます。
- 手順3「画像のリサイズ」で幅の上限だけ、今後使用するであろう画像の最大値を入力します。
幅だけを設定することで、リサイズ時に勝手に幅にあわせて高さも元の画像の比率を保ったままリサイズされます。
サイト本文の横幅ぴったりぐらいがおすすめです。WordPressのテーマでは大体7，800ピクセルぐらいです。当サイトでは少し余裕をもって800に設定しています。
- 手順4「遅延読み込み」は「画像が表示領域に～」の部分と「自動スケーリング」の部分にチェックを入れます。
- 手順5「WebP変換」の「ほかのブラウザでは元の画像を提供し、～」の部分にチェックを入れて「次へ」をクリックします。
- 手順6WebP配信方法で表示されるコードを.htaccessの「BEGIN WordPress」より上の部分にコピペする。
WebP変換のコードは.htaccessにWordPressが自動で書き込んでいる部分（BEGIN WordPressからEND WordPress）以外の部分にコピペしてください。基本は上の部分に挿入すると上手くいきます。
「変更を保存」をクリックしてPNGからWEBPに変わっていたらOKです。
コレだけやればとりあえずは設定終了です。
次から画像をWordPressにアップロードした際に自動でリサイズされ画像データを極力軽くしてくれます。
ちなみに、遅延読み込みの設定はWordPressの標準機能にも搭載されているみたいですが、WordPressでは対応できない状況もカバーでき、双方で干渉しないためオンにしておくのが無難です。
他のプラグインや他の方法で遅延読み込み設定をしている場合はこのプラグインで設定する必要はありません。
