【WordPress】プラグイン「EWWW Image Optimizer」で画像を軽量化

「EWWW Image Optimizer」について

「EWWW Image Optimizer」というプラグインの紹介です。

こちらは画像を最適化してくれるプラグインで、画像を圧縮化して容量を小さくしてくれます。

画像データの容量が大きいとページの表示速度に影響を与えます。

1記事に1枚くらいであればいいのですが、かなりの枚数の画像を掲載することもよくあります。

ページの表示速度はGoogleの検索ランキングにも影響するので、SEO対策の観点からも、画像の圧縮は必須とも言えます。

WordPress以外でサイトを構築している場合には、

https://tinypng.com/

を使っていつも圧縮するのですが、

WordPressからアップロードする画像を毎回ツールを使って圧縮するのは面倒ですね。

そこで、

このプラグインを設定しておくことで、

アップロード時に自動で圧縮してくれるので非常に助かります。

また、既存の画像も一括で圧縮することも出来るので、とても優秀なプラグインの一つです。

「EWWW Image Optimizer」の設定方法

こちらのプラグインには「一般設定」と「一括最適化」の2つの設定画面があるので、

一般設定

まずは「一般設定」画面から説明を行います。

管理画面左メニュー「設定」→「EWWW Image Optimizer」と移動すると、

「基本設定」「高度な設定」「リサイズ設定」「変換設定」「WebP 設定」のタブからなる画面が表示されます。

こちらの画面はほとんど変更することは無いので、デフォルトのままで問題はないですが、

一応各タブの設定内容を見ていきます。

■「基本設定」タブ

• Cloud optimization の API キー
  ※APIキーの取得は有料オプションになります。
  　利用されている方はほとんどいないと思います。
• デバック
  ※チェック不要です。
• メタデータを削除
  ※チェックを入れておくと、Exif（メタデータ）を削除してくれます。
  　削除すると多少ですが容量が減ります。
  　それに、Exifには位置情報などの個人データが含まれることもあるので、削除した方がいいです。
  　が、もしExifを削除したくない場合には、チェックを外してください。
• JPG 最適化レベル
  ※デフォルト（ロスレス圧縮）でOKです。
• PNG最適化レベル
  ※デフォルト（ロスレス圧縮）でOKです。
• GIF最適化レベル
  ※デフォルト（ロスレス圧縮）でOKです。
• PDF最適化レベル
  ※デフォルト（無圧縮）でOKです。
• バックアップ元
  ※有料オプションです。

■「高度な本設定」タブ

• JPG 画質レベル
  ※空白のままだと、WordPressデフォルト値の82が適用されます。
  　数値を低くすると圧縮率が上がるのでファイルサイズは小さくなりますが、その分画質が落ちてしまいます。
• 並列最適化
  ※各サムネイルのリサイズ処理も並行して行われているのでパフォーマンスが落ちる場合には、チェックを入れておけばいいようです。
  　が、今まで使用したことは無いです。
• スケジュール最適化
  ※最適化していない画像の最適化を定期的に行ってくれるみたいです。
• メディアライブラリフォルダーを含める
  ※チェックを入れておくと、一括最適化とスケジュール最適化中にメディアライブラリの最新フォルダもスキャンの対象になります。
• 最適化するフォルダー
  ※メディアライブラリ以外に最適化を行う場合には、そのパス（絶対パス）を登録します。
• 無視するフォルダー
  ※上記「最適化するフォルダー」を設定した場合に、無視したいフォルダがあれば、そのパスを登録します。
• 埋め込み型のヘルプを有効化
  ※現在の URL、IP アドレス、ブラウザー / デバイス情報やデバック情報が収集されることもあるようです。
  　嫌な場合にはチェックを入れないようにしましょう。
• 使用状況トラッキングを許可しますか ?
  ※チェックを入れると、プラグインの使用状況が開発者に送信されます。

■「リサイズ設定」タブ

• ExactDN
  ※CDNを利用され場合はチェックを入れて下さい。
• リサイズ検知
  ※チェックを入れると管理バーに「Detect Scaled Images」というボタンが追加されます。
  　縮小表示によって遅延ロードが発生している画像を検知してくれるようです。
• メディア画像をリサイズ
  ※上限値を設定した場合、メディアライブラリに直接アップロードされた画像や投稿画面やページ内でアップロードした画像が
  　そのサイズを超えた場合にリサイズされます。
• 他の画像をリサイズ
  ※上限値を設定した場合、メディアライブラリに間接アップロードされた画像（テーマイメージやフロントエンドのアップロードなど）が
  　そのサイズを超えた場合にリサイズされます。
• 既存の画像をリサイズ
  ※チェックを入れると、既存画像のリサイズを許可します。
• リサイズを無効化
  ※チェックを入れたサイズの画像は、「最適化を無効化」「作成を無効化」できます。

■「変換設定」タブ

• コンバージョンリンクを非表示
  ※「EWWW Image Optimizer」をインストールしている場合、メディアライブラリの画面に「再最適化 | JPG を PNG」みたいなリンクが表示されています。
  　チェックを入れておくと非表示にしてくれるので、
  　複数人でサイト運営を行っている場合などには、不用意に変換を行わせないためにもチェックを入れておいた方がいいです。
• オリジナルを削除
  ※圧縮が成功した後、オリジナル画像を削除します
• JPG から PNG への変換を有効にする
  ※チェックを入れると画像のフォーマットを変更（JPG→PNG）しますが、理由がなければ変換しな方がいいです。
• PNG から JPG への変換を有効にする
  ※チェックを入れると画像のフォーマットを変更（PNG→JPG）しますが、理由がなければ変換しな方がいいです。
• GIF から PNG への変換を有効にする
  ※チェックを入れると画像のフォーマットを変更（GIF→PNG）しますが、理由がなければ変換しな方がいいです。

■「WebP 設定」タブ

WebPは「ウェッピー」と呼びます。
現状はまだ見かける機会が少ないですが、Googleが開発している拡張子「.webp」の静止画フォーマットです。
サポートしていないブラウザもあるので注意が必要ですが、JPEGやPNGなどのフォーマットと比べると容量が20～30%ほど削減できると言われています。

WebP画像への対応方法については、以下の記事で詳しくまとめています。
[ プラグイン「EWWW Image Optimizer」で画像をWebP対応 ]

• JPG、PNG を WebP に
  ※チェックを入れると、JPG画像やPNG画像をWebP画像に変換してくれます。
  
• Force WebP
  ※チェックを入れると、既存画像をWebPに変換します。
• WebP のURL
  ※上記の「Force WebP」を有効にした場合に設定する項目です。
• 代替 WebP に書き換え
  ※Apacheの書き換えルールが機能しない場合や、イメージがCDNから提供されている場合、ここにチェックを入れます。

一括最適化

次は「一括最適化」の画面の説明になります。

管理画面左メニュー「メディア」→「一括最適化」から移動できます。

・「最適化を開始」をクリックすれば、一括での最適化が開始します。

↓

↓

これで、既存画像の一括最適化も完了です。

因みに、

画像毎に個別で最適化することも可能です。

管理画面左メニュー「メディア」→「ライブラリ」と移動して、

「メディアライブラリ」の画面を開くとメディアの一覧が表示されます。

まだ最適化されていない画像の場合、

右側に「今すぐ最適化！」と表示されているので、

クリックすると最適化が行われます。

あとは、

サイトのパフォーマンスを測定てくれるツールもいろいろと公開されているので、

それらを使ってサイト改善の参考にするのも重要だと思います。

私は、「GTmetrix」というツールを良く使用しています。