ログアウト

【プラグイン】EWWW Image OptimizerでWebp導入方法

※以下の導入は必須ではなく、サイトスピードがかなり遅い場合のみ
プラグインをオンにする。
デメリットも多いため、使用する場合は導入のみ。

 

①(ダウンロード・有効化の後)
「設定」→「EWWW Image Optimizer」に移動
『In order to recommend the best settings for your site, ~』と聞かれるので
・サイトを高速化
・ 今は無料モードのままにする
にチェックして『次』をクリック

===▲基本はここまで▲===
===▼以下、サイトスピードの状況によって使用すること▼===

②「サイトの推奨設定は次の通りです。」の画面で
・WebP 変換
にチェックして『設定を保存』をクリック→『完了』をクリック

③「メディア」→「一括最適化」に移動
『最適化されていない画像をスキャンする』をクリックして画像をWebp化。

④「基本」のタブで『メタデータを削除』にチェックを入れて最下部の『変更を保存をクリック』。
『WebPの配信方法』のところのコードをドメイン直下の.htaccessの冒頭にコピーして追記する。
Webp表示に成功したら赤く『PNG』となっているところが緑の『WEBP』になる

・表示の確認方法
サイトを表示→デベロッパーツール→ネットワーク→画像を選択肢、タイプが『webp』になっていたらOK
(画像URLがpngとかでもきちんとwebpで表示されている)

・うまく表示されない場合
ー ブラウザのキャッシュを削除するか画像の容量や遅延読み込みに関するプラグインを停止してみる
ー .htaccessのコードの下の「JS WebP リライト」や「Picture WebP Rewriting」のところにチェックをいれてみる

参照)https://jimbee.jp/ewww-image-optimizer/