最速で解決!EWWW Image OptimizerでWEBP(緑)にする方法

この記事のURLとタイトルをコピーする
WordPressプラグイン
読者さん
読者さん
EWWW Image Optimizerで、webP対応したのに、PNG(赤)からWEBP(緑)にならないよ〜!

Png red

  • JPG, PNG から WebP にチェックを入れて、対応済み。
  • .htaccess に、コード挿入済み
  • .htaccess は、手動で入力した
  • だけどPNG(赤)表示から、WEBP(緑)にならない

って悩みを、解決します。

というわけで今回は、EWWW Image OptimizerでPNG(赤)から、WEBP(緑)にする方法を最速で解説していきます。

EWWW Image Optimizerで、WEBP(緑)にする方法

スクリーンショット 2019 05 07 9 49 51

解決方法は、画像の遅延読み込み系プラグインを停止することです。

画像の遅延読み込み系プラグイン停止すると、WEBP(緑)対応に表示が変わりました。PNG(赤)表示から切り替わらずお手上げだったのですが、ぶじに解決できました。

WEBP(緑)にならなかった原因

A3 Lazy Load thum

WEBP(緑)にならなかった原因は、a3 Lazy Load でした

画像の遅延読み込み系のプラグインを有効化してると、EWWW Image Optimizerとの相性問題で WEBP(緑)にならないことがあるんですね。勉強になりました。

プラグイン同士の相性問題、あなたも疑ってみると解決への糸口になるかもしれません。

どうして、気がついた?

Webp tienyomikomi image

気がついた理由は、WebP がちゃんと出力されていたからでした。

Google Chrome の検証 - Network を眺めているときに、ひらめきが頭をよぎったんです。

サウンドオルビス
サウンドオルビス
a3 Lazy Loadで読み込まれている画像が、webPになってないぞ!

ってことに。

画像系のプラグインを、あらためて確認。プラグイン「a3 Lazy Load」との相性を、疑ってみたことが今回の背景でした。


「オフスクリーン画像の遅延読み込み」に対応したい場合

Eio exactdn

EWWW Image Optimizer のタグ設定ExactDN - Lazy Load にチェックを入れてください。

  • 次世代フォーマットでの画像の配信
  • オフスクリーン画像の遅延読み込み

EWWW Image Optimizer は、なんと標準対応です。WEBP 対応の理由は、PageSpeed Insight の対策ですよね。画像の遅延読み込み系プラグインを、あらたに入れる必要はありません。

ExactDN タブの Lazy Load 説明文を翻訳してみましょう↓

Lazy Load 説明の翻訳
画像がビューポートに入るとき(または入力しようとしているとき)にのみ画像が読み込まれるため、実際の読み込み時間と認識される読み込み時間が短縮されます。 ExactDNおよびWebP機能と一緒に使用すると、プラグインは各デバイスに最適な画像サイズとフォーマットをロードします。

Improves actual and perceived loading time as images will be loaded only as they enter (or are about to enter) the viewport. When used with the ExactDN and WebP features, the plugin will load the best available image size and format for each device.

EWWW Image Optimizer ひとつあれば、問題なしでした。

EWWW Image Optimizer のダウンロード

Eio wp pluginpage

ダウンロード:EWWW Image Optimizer

1つで2つ以上の便利な機能が備わっている、画像最適化プラグイン「EWWW Image Optimizer」。次世代の SEO ブログを構築しているけど、まだダウンロードしていない方は、ぜひ使ってみてください。

入手方法は、ダウンロードページまたは、WordPressプラグインページ「新規追加」から、EWWW Image Optimizer と検索してください。

さらに詳細は使い方や、おすすめの設定についてはこちらの記事をどうぞ↓

「EWWW Image Optimizer」の使い方。次世代フォーマット画像に対応!

まとめ

EWWW Image OptimizerでWEBP(緑)にする方法を、解説してきました。今回も最速で解決できたでしょうか?

ワードプレスのプラグインは、簡単に便利な機能を追加できますが、相性問題に気をつけないといけませんね。

プラグインの整理が必要かもしれません。あなたの悩みを解消できていたら幸いです。

そのほか、愛好家がえらぶ、おすすめ WordPress プラグインは、こちらをどうぞ↓

この記事のURLとタイトルをコピーする
記事へのお問い合わせ

サウンドオルビス

1,756,334 views

悩みからの解放宣言!!「音楽」と「テクノロジー」の悩みを解決するために、情報発信しています。現在「モバイルDTM」といえば、サウンドオルビス!!って言われるような記事をたくさん書いています。

プロフィール