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

この記事のURLとタイトルをコピーする
WordPressプラグイン
読者さん
読者さん
ブログの画像を、自動で最適化してくれるプラグインがほしい!
チビおるびす
チビおるびす
って疑問を、解決します。
こんなプラグインあったらいいな...
  • アップロードした画像を、自動で最適化
  • 次世代フォーマット(webP)での画像の配信
  • オフスクリーン画像の遅延読み込み
  • メタデータを自動で削除してくれる

そんなあなたの望みを叶えてくれるのが、WordPress プラグイン「EWWW Image Optimizer」なんです。

というわけで今回は、「EWWW Image Optimizer」の使い方と、おすすめの設定について解説します。

EWWW Image Optimizerの使い方

EWWW Image Optimizerの使い方

EWWW Image Optimizerの使い方を、解説していきます。

インストール方法

Ewwwio instal

  1. プラグインをクリック
  2. 新規追加をクリック
  3. EWWW Image Optimizerを検索
  4. WordPress Ping Optimizer の今すぐインストールをクリック

作者名が「Exactly WWW」であることを、確認してください。

ダウンロードは、こちら→ EWWW Image Optimizer

これで、インストール作業は終了です。

設定について

Ewwwio setteigamen

EWWW Image Optimizerの設定をしていきます。

サウンドテック・ラボは、画像の最適化・WEBP対応などを「EWWW Image Optimizer」でおこなっています。

どんな設定をしているから、参考になると思いますので、シェアさせていただきます。

設定画面の開き方
  • 設定をクリック
  • EWWW Image Optimizerをクリック
ワンポイントアドバイス

EWWW Image Optimizerの使い方は、以下のとおり↓

  1. EWWW Image Optimizerの各種設定
  2. 画像の一括最適化
  3. あとは、自動処理

個人的には、こんな感じのながれで使っています。

Basic のおすすめ設定

Ewwwio1

Basic 設定の説明
  • Optimization API Key:空白でOK(無料なら必要なし)
  • Remove Metadata:チェック必須(画像の位置情報など削除してくれる)
  • JPG 最適化レベル:Pixel Perfect
  • PNG 最適化レベル:Pixel Perfect
  • GIF 最適化レベル:Pixel Perfect
  • PDF 最適化レベル:無圧縮
  • バックアップ元:空白でOK(無料なら必要なし)

無料で使うなら最適化レベルは、ロスレスタイプの「Pixel Perfect」で十分です。

PNGのみ「Premium」を選択できます。

Premium - Uses Pngquant and is available in "local" mode without an API key. If an API key is entered, the plugin will automatically use the API for this compression level (lossy).

Basic Configuration - EWWW I.O. Documentation より引用

翻訳すると、こんな意味↓

プレミアム - Pngquantを使用し、APIキーなしで "ローカル"モードで利用可能です。APIキーが入力された場合、プラグインは自動的にこの圧縮レベルのAPIを使用します(損失)。

無料で使えますが、画像の損失があるため使わなくていいと判断しました。

ExactDN のおすすめ設定

Ewwwio exactdn

ExactDN 設定の説明
  • ExactDN:チェックなし(有料版のみ)
  • Include All Resources:チェックなし(有料版のみ)
  • Premium Compression:チェックなし(有料版のみ)
  • Lazy Load:チェック(無料で、オフスクリーン画像の遅延読み込みに対応できる)

ExactDN の設定は、基本的に有料版の設定です。

Lazy Load のみ、無料でオフスクリーン画像の遅延読み込みに対応できるので、チェックしても損はありません。

ほかの画像遅延読み込みプラグインを使用している場合は、チェックしなくて大丈夫です。

Advanced のおすすめ設定

Ewwwio advanced

Advanced 設定の説明
  • JPG Quality Level:空白でOK(設定するなら70〜90の間が推奨値)
  • Parallel Optimization:チェックなし
  • Scheduled Optimization:チェックなし
  • Include Media Folders:チェックなし
  • Folders to Optimize:チェックなし
  • Folders to Ignore:チェックなし

Advaced は、とくにいじる必要はありません。

当ブログでも、設定の変更はなしで運営しております。

リサイズ のおすすめ設定

Ewwwio resize

リサイズ 設定の説明
  • リサイズ検知:チェックなしOK(あなたにだけ、実際の表示サイズより大きい画像を教えてくれる機能)
  • Resize Images:チェックなし
  • 既存の画像をリサイズ:チェックなし(勝手に変更されるのは困るため)
  • 他の画像をリサイズ:チェックなし
  • リサイズを無効化:チェックなしでOK(テーマによる)

リサイズ検知は、調べたいときだけチェックをいれると便利です。

そのほかは、基本的にチェックなしで OK です。

テーマによりますが、リサイズを無効化にチェックを入れるだけで使わない画像サイズの作成を止めることができます。

わたしはテーマで画像が表示されない不具合などあるとめんどうなので、リサイズ項目はとくにチェックをつけませんでした。

Convert のおすすめ設定

Ewww convert

Convert おすすめ設定
  • コンバージョンリンクを非表示:チェックあり
  • Delete Originals:チェックなし
  • JPG to PNG Conversion:チェックなし
  • PNG to JPG Conversion:チェックなし
  • GIF to PNG Conversion:チェックなし

「コンバージョンリンクを非表示」は、データベース内の他の場所に画像への参照がある可能性があるとのことなので、セキュリティ的にチェックをつけてみました。

「Delete Originals」は、変換前の画像を削除するという意味です。チェックは入れていませんが、サーバーを圧迫してしまう場合はチェックを入れた方がいいですね。

「JPG to PNG Conversion」「PNG to JPG Conversion」「GIF to PNG Conversion」は、意図しない形式に画像が変換されてしまうため、チェックはしませんでした。

WebP のおすすめ設定

Ewww webp

WebP おすすめ設定
  • JPG, PNG から WebP:チェックあり
  • 強制 WebP:チェックあり
  • WebP のURL:チェックなし
  • JS WebP Rewriting:チェックあり

「JPG, PNG から WebP」は、次世代フォーマットでの画像の配信に対応するためにチェックは必須になります。

「強制 WebP」は、JPEG・PNG画像をぜんぶ WebP を生成させて保存させておくときにチェックを入れたほうがよさそうです。わたしは入れておきました。

「WebP のURL」は、とくに設定の必要はなさそうです。

「JS WebP Rewriting」については、チェックは入れませんでした。

私の環境では、この設定じゃないと記事の一部画像しか「WebP」にならなかったんです。

サウンドオルビス
サウンドオルビス
詳しいことは不明ですが、WebPにならないときは試してみてね!!

画像の一括最適化

「EWWW Image Optimizer」で、画像を一括最適化する方法を解説します。

Ewww ikkatu click

WordPress のダッシュボードにあるメディアをクリックし、一括最適化をクリックします。

Ewww ikkatu scan

最適化されていない画像をスキャンするをクリックして、画像を検出します。

Ewww ikkatu saitekika

最適化を開始をクリックします。

Ewww ikkatu log

画像の最適化が終了すると、最適化ログが表示されます。

Ewww ikkatu henkan

当ブログのように「WebP」に対応していれば、メディアの最適化項目に WebP サイズが表示されているはずです。

過去の画像が返還されないときは、「再最適化」など個別画像ごと処理する必要がありますよ。

WebP対応できないときは?

画像の遅延読み込みプラグインが、原因かもしれません。

「EWWW Image Optimizer」の操作画面では、WebP対応すると緑色に表示がかわるサインがあるんです。

いろいろ試した結果、赤から緑に変えることができました。

その解決方法を、シェアさせてさせただきました。

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

まとめ

次世代フォーマット画像に対応するために、「EWWW Image Optimizer」の使い方を解説してきました。

いやいやいや、ハマってしまうと難しいプラグインですね。

設定次第で結果がわかるので、あなたいんぴったりの設定を探してみてください。

サウンドオルビス
サウンドオルビス
参考までに、公開している設定値も試してみてね!

そのほか、便利で使えるWordPressプラグインの記事は、こちらをどうぞ↓

「WordPressプラグイン」カテゴリの新着記事はこちら

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

サウンドオルビス

1,755,435 views

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

プロフィール