EWWW Image Optimizerを解説！画像圧縮とWebP変換できるWordPressプラグインの設定方法と使い方

このトピックでは「EWWW Image Optimizer」を使うメリットについて解説します。

基本的な機能は無料で無制限に利用できるのが激アツだね！

このトピックでは「EWWW Image Optimizer」を使うときの注意点について解説します。

前提として、プラグインを入れすぎた場合の共通の注意点「ブログの表示速度が遅くなる」「テーマなどの機能が重複すると不具合に繋がる」は別記事で詳しく解説します。

「EWWW Image Optimizer」は高性能な反面、機能が重複しやすいんだ。

注意点1：圧縮レベルの微調整はできない

注意点2：リサイズとWebP変換によってファイルが増加する

「EWWW Image Optimizer」の機能によってリサイズとWebP変換をすることで、元画像ファイルのアップロードに対して複数のファイルデータを保持することになります。

リサイズとは、画像や写真の大きさ（ピクセル数/画素数）を変更すること。基本的には元の画像内容を保ったまま「拡大」「縮小」してサイズを調整する。リサイズすることでデータ容量も増減する。

画像圧縮して1枚あたりのデータが軽くなっても、リサイズによってファイル数が複数生成されてしまう点には注意が必要です。

この記事で解説する設定方法を行えば画像生成するファイル数を3枚まで減らすことができます。
しかし元画像を含めて4枚のファイルデータを保持することになるため、サーバーの容量圧迫にも繋がることは覚えておきましょう。

画像を事前にリサイズしておけば生成されるファイル数は最小限で済むぜ！

注意点3：他のプラグインと機能が重複しやすい

「EWWW Image Optimizer」は高性能な反面、他のプラグインやWordPressテーマと重複する機能があります。注意して欲しい主な機能は次のとおり。

この中でも特に重複しやすい機能が「画像の遅延読み込み」です。

画像遅延読み込み（Lazy Load）とは、スクロールしないと見えない場所にある画像や動画の読み込みを後回しにする仕組みのこと。ページ内の全画像を読み込むと表示速度に影響が出るため、読者が見える範囲だけ読み込むことで表示速度を改善できる。

例えばゼロイチブログのおすすめWordPressテーマ「SWELL」には遅延読み込みが標準で装備されています。他にも多機能・高性能なプラグインには実装されていることが多いです。

動作の不具合を避けるためにも重複する機能には十分注意してください。

設定方法では「EWWW Image Optimizer」の遅延読み込みをOFFにするやり方を解説するね。

注意点4：SWELL公式からは非推奨とされている

ゼロイチブログがおすすめしているWordPressテーマ「SWELL」の公式サイトでは次のようにアナウンスされています。

画像がアップロードできなくなる不具合が起きている場面に何度か遭遇しています。

常時有効化していることで問題になるので、必要な時だけONにして画像圧縮に使う、という使い方は問題なくできるかと思います。

他にも画像圧縮系プラグインはありますので、問題がなさそうなものをご利用ください。

引用元：SWELL公式サイトから一部抜粋

上記のアナウンスされた記事の最終更新は2022年11月です。この時期以降にテーマ側・プラグイン側で行われたアップデートで不具が解消されたのかなどは分かりません。

ですが「SWELL」を使っているなら「EWWW Image Optimizer」の利用には注意したほうがいいでしょう。

ゼロイチブログでは「SWELL」と「EWWW Image Optimizer」を併用していますが、目に見えて分かる動作の不具合は起きていません。

SWELL公式から非推奨になってるプラグインは他にもあるから必ずチェックしておこう！

あわせて読みたい

SWELLブログから即削除？初心者が注意するべき18種類のWordPressプラグイン

WordPressプラグイン「EWWW Image Optimizer」のインストールから使い方までを解説します。

初心者向けに必要最小限だけをギュッと絞って解説するね。

「EWWW Image Optimizer」インストール

「EWWW Image Optimizer」インストールは以下の手順で進めます。

STEP

プラグインを追加

WordPressにログイン、管理画面の左メニューから「プラグイン」→「プラグインを追加」をクリック。

STEP

プラグインをインストール

「プラグインの検索」ボックスに「EWWW Image Optimizer」と入力。

検索結果に表示された「EWWW Image Optimizer」を選んで「今すぐインストール」をクリック。

STEP

プラグインを有効化

表示が「有効化」に変わればクリックしてください。

画面が「インストール済みプラグイン」一覧画面に切り替わればインストール完了です。

「EWWW Image Optimizer」初期設定の方法

「EWWW Image Optimizer」初期設定は以下の手順で進めます。

STEP

プラグインを設定

インストール済みプラグイン一覧画面にある「EWWW Image Optimizer」の設定をクリック。

STEP

プラグインのセットアップ

「EWWW Image Optimizer」を一番最初に設定する際は以下の画面が出てきます。

すでに初期設定が終わっていれば以下の画面は出ません。その場合は次の「詳細設定」に進んでください。

「サイトの高速化」にチェックを入れて、「今は無料モードのままにする」を選択。「次」をクリック。

選択項目をテキストで確認するならここをクリック。

サイトを高速化	チェックを入れる。
保存スペースを節約	チェック不要。
5倍以上の最適化と 優先サポートを有効化	チェック不要。
今は無料モードのままにする	選択する。

設定の確認画面に切り替われば各種入力して「選択を保存」をクリック。

選択項目をテキストで確認するならここをクリック。

メタデータを削除	チェックを入れる。
遅延読み込み	チェックを外す。
WebP変換	チェックを入れる。
幅の上限｜高さの上限	幅・高さ両方とも0（ゼロ）にする
画像のバックアップ	「ローカル」を選択。
埋め込みヘルプ	チェックを外す。
匿名の報告	チェックを外す。

次の「詳細設定」で変更できる項目のため、編集せずに初期値のままでもOKです。

「新規アップロードは～」の表示に切り替われば「完了」をクリック。

「EWWW Image Optimizer」の詳細設定画面に切り替われば初期設定は完了です。

「EWWW Image Optimizer」詳細設定の方法

「EWWW Image Optimizer」は細かく設定できますが、ゼロイチブログでは無料版の範囲で初心者向けに解説します。

詳細設定では「必須」項目と「変換」項目だけ設定するよ！

STEP

ルディクロスモード表示に切り替え

WordPress管理画面の「設定」の中にある「EWWW Image Optimizer」を選択、「ルディクロスモード」をクリック。

選択項目が増えれば詳細設定に進みます。

STEP

「必須」項目の設定：メタデータ・幅と高さ・遅延読み込み・WebP変換・WebP配信方法

「ルディクロスモード」の状態で「必須」を選択して各項目を設定します。

選択項目をテキストで確認するならここをクリック。

項目が多いため、必須項目のみ抜粋します。

メタデータを削除	チェックを入れる。
幅の上限｜高さの上限	幅・高さ両方とも0（ゼロ）にする。
遅延読み込み	チェックを外す。
WebP変換	チェックを入れる。
WebPの配信方法	「リライトルールを挿入する」をクリック。

メタデータとは、「データそのもの」ではなく「そのデータに関する情報」を記述したデータのこと。例えば画像ファイルには「いつ・どこで・どんな設定で撮影したのか」など詳細情報がメタデータとして記録される。

「WebPの配信方法」の枠内にある「リライトルールを挿入する」をクリックして、赤色の「PNG画像」の表示が緑色の「WEBP画像」の表示に変わればOKです。

「変更を保存」をクリックして「必須」項目の設定は完了です。

STEP3の設定は内容が専門的だから、興味ある人だけ下の補足を確認してね。

補足：「リライトルールを挿入する」で行った設定内容の詳細を確認するならここをクリック。

「リライトルールを挿入する」をクリックすることで、枠内に記載されていた複雑なコードを「.htaccess」に自動で挿入できます。

.htaccess（ドット エイチティ アクセス）とは、Apache（アパッチ）というWebサーバーで使われるディレクトリごとの設定ファイルのこと。ここにコードを書き込むことでWordPressにいろいろな動作をさせることができる。

このコードを挿入することで、読者のブラウザがWebP対応になっていればWebP画像を表示、WebP非対応のブラウザならPNGやJPEG画像を表示させることができます。

STEP

「リサイズ」項目の設定

「リサイズ」の項目を選択して「リサイズを無効化」の枠内に無効化したいサイズにチェックを入れます。

• SWELL有効化の場合
• Cocoon有効化の場合

選択項目をテキストで確認するならここをクリック。

medium_large – 768 x 9999	チェックを入れる。
large – 1600 x 0	チェックを外す。
1536×1536 – 1536 x 1536	チェックを入れる。
2048×2048 – 2048 x 2048	チェックを入れる。
pdf-full – PDF ファイルのフルサイズプレビューの作成を無効にすると、すべての PDF プレビューサイズが無効になります	チェックを外す。

チェック項目が画像と異なる場合、「large」「pdf-full」以外はすべてチェックを入れてください。

各種チェックを入れたら「変更を保存」をクリックして「リサイズ」の項目は設定完了です。

サイズごとの画像生成でサーバー圧迫してしまうのを、これでグッと減らせるな。

STEP

「変換」項目の設定

「変換」の項目を選択して「変換リンクを非表示」にチェックを入れます。

下にスクロールして「変更を保存」をクリック。これで「変換」項目の設定は完了です。

メディアライブラリで画像の拡張子（ファイル形式）を誤変換しないようにする設定だよ。

アップロード済み画像を一括でオリジナル復元する

WordPress管理画面の「ツール」の中にある「EWWW Image Optimizer」を選択。「画像の復元」をクリックすれば圧縮・WebP変換した画像を一括でオリジナル画像に復元できます。

アップロード済み画像を個別で圧縮・WebP変換・復元する

「メディア」の中の「ライブラリ」を開いて「今すぐ最適化！」を押せば、個別で画像圧縮・WebP変換できます。

オリジナル画質の画像に戻したいときは「オリジナル復元」を押してください。

画像をPNGファイルのままアップロードする方法

アップロードした画像を「オリジナル復元」するとき、ファイルサイズが完全に元に戻るわけではありません。PNGファイルをアップロードするとJPEGファイルに変換されてしまうため、圧縮された画像を元のファイルサイズに戻せないからです。

元のファイルサイズを復元するためにはJPEG変換を止める必要があります。そのためには一度「EWWW Image Optimizer」を無効化した状態で画像をアップロードしてください。

プラグインが無効化になっていればPNGファイルのままWordPressにアップロードできます。その後プラグインを有効化して「今すぐ最適化！」をすればPNGファイルのまま画像圧縮できます。

ただし、テスト用画像のPNGファイル（1,146KB）をWebP変換しても、736KB（約-35%）までしか自動圧縮できませんでした。

ファイルサイズが大きいとブログの表示速度に悪影響がでるため、基本的にはJPEG変換された画像を使うようにしましょう。

あくまで「PNGファイルのままアップロードしたい理由」がある人向けの方法だね。