メディア画像の最適化｜EWWW Image Optimizerで画像圧縮する方法

Web サイトに欠かせない メディア画像

大きなサイズの画像や 図解による解説などで 多くの画像を使用する場合など
これらのアップロードされた 画像の容量によって
サイトのサーバーに負担をかけてしまうことをご存じでしょうか？

よくある例としては ショッピングサイトなどの画像の多いサイトで
なかなか画面が表示されない場面で 不快に思ってしまい ほかのサイトへ移ってしまうなんてことありますよね。

表示速度は サイトにとって重要な要素ですので 対処方法について知っておく必要があります。

そこで 画像の圧縮や 表示速度アップしてくれるプラグイン
EWWW Image Optimizer を取り入れ 画像を最適化していきます。

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

プラグインのインストールは簡単です。
検索BOXにキーワードを入力すると 関連のプラグインが表示されます。

画面下に 使用中の WordPressバージョンと互換性あり とありますが
お使いのテーマによっては 認証されていないケースがありますので ご確認をお願いします。

今すぐインストール をクリックし 正しくインストールされたら 有効化をクリックします。

以前は プラグインを有効にすると 設定画面から 各項目の設定するようになっていましたが
初回インストールの場合、設定に必要な項目をチェックし 初期設定完了となります。

すべて 後から変更できますので ここはこのままで保存をクリックして完了します。

EWWW Image Optimizer 設定画面

後から設定を変更する場合は 管理画面の設定、または プラグインの
EWWW Image Optimizer の設定をクリックすると 設定画面へ移動できます。

EWWWの設定画面も 以前と比べてシンプルになりましたし、日本語表記でタブも分かりやすいです。

先ほどのサイトの推奨設定はこの 基本・サポート・貢献 の３つの項目にあります。

基本

先ほどの設定項目にありました 今は無料モードのままにするですが

EWWWは 基本的には無料で利用できますが、利用できる画像の上限もあります。
高度な最適化や 多くの画像を扱う場合など、APIキーを取得（有料）することで
より多くの機能を利用することが出来ます。

ですが、初心者から始める場合は 特に必要ないので無料モードで使用していきます。

JPG品質レベル

画像の形式（拡張子）によって画質の特徴があります。

一般的に画像素材などに使用されているのが JPGや jpegで 写真などに適した形式になります。
スクリーンショットした画像などは PNG の形式の画像保存されます。

このJPGの品質レベル設定、1-100 との範囲で。設定となっていますが、
どれくらいの差なのでしょうか？

簡単に言うと 数字が小さいほど画質が悪くなり 100 で設定した場合、
元の画像に影響が出ないという感じです。

実際に どのくらいの画質になるのか試してみました。

これは メディアサイズ  640 x 426 の画像を JPG品質レベル 2 でアップロードした
どちらも同じ、表示サイズを変えただけの ひとつの画像です。

サムネイルのサイズでは 画質が崩れてしまって何の写真なのか分かりませんが
400px ほどの画像なら問題なく綺麗に表示することが出来ます。

そのほかのレベルでの比較

結果、サムネイルで使用する場合は 40 か 50 くらいのレベルで 正常に表示することが出来そうです。

サポート

サポートは 初期設定でありました 埋め込み型のヘルプ の設定画面です。

有効化した場合、このサポートのアイコンが表示され ここをクリックすると
サポートページが開くのですが、これがすべて英語表記となっています。

日本語変換もなさそうですので 私はチェックを外しましたが
各項目の使いかたをもっと知りたい場合は 項目の横にあるクエスチョンマークをクリック

こちらの画面は 日本語変換され分かりやすいページになっていますし
サポートが必要な場合は EWWWIOサポートから検索することもできます。

貢献

初期設定でありました 匿名の報告 がこちらの項目です。
こちらは 使用状況を追跡することで EWWW Image Optimizer の改善を図るためのものです。

詳細設定 – Erable Ludicrous Mode –

さらに 詳細に設定する場合はこちら  Erable Ludicrous Mode をクリックします。

先ほどの項目にいくつか項目が追加されていますが 特に知っておきたい項目は リサイズと 変換の2つです。

リサイズ

ワードプレスでは 1枚のメディア画像のアップロードにつき 複数の画像がリサイズされるようになっています。

これは原寸から 投稿ページや サムネイル画像に使用する際に使用する画像サイズを
あらかじめ作成しておくといったもので 設定項目の メディアのサイズ設定で指定したサイズなどが基本となります。

この画像サイズは メディア設定や ルクセリタスのテーマではさらに
サムネイルの サイズを作成することができますので これらをチェックする必要がありますが
初めはどのサイズが不要なのか 分かりにくいので間違わないように気を付けなければいけません。

大きなサイズを使わないなど、不要なサイズを見極めて設定していきましょう。

変換

変換では JPG や PNG など 拡張子によって画像の品質の特徴があり、
その拡張子を変更することで 画像の容量を少なくすることができます。

が、また変換することで画質が落ちてしまうなどデメリットもあり
それぞれの特徴を理解することが大事です。

スクリーンショットについての記事で拡張子について書いていますので 参考までに…

EWWWの使いかた 画像を最適化する

EWWW Image Optimizer のプラグインを有効化すると
メディアライブラリにアップロードされた新しい画像は自動的に最適化されます。

それ以前に保存している画像には このような表示がされています。

個別に選択して最適化

個別で最適化をする場合、このように最適化したい画像にチェックを入れて
一括最適化を選択し適用をクリックします。

すべての画像を一括で最適化

また、すべての画像を一括で最適化する場合は メディアの項目から一括最適化を選択します。

メディアにある画像すべてが選択されています。
最適化されていない画像をスキャンするをクリックすると
実際の画像の枚数より多くの画像が選択されます。

これは、1枚の画像に対してさまざまなサイズの画像が作成されるためです。
先ほどのリサイズ の設定画面でも出てきました
ダッシュボードのメディア設定画面や Luxeritas の管理画面で設定された画像サイズです。

過去にアップロードされた不要な画像に対しては この最適化を利用するか
もしくは データベースの管理画面 phpMyAdmin から個別に削除することもできます。

この不要な画像についての詳しい記事はこちらです。