<>

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

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

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

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

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

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

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

プラグイン新規追加画面-EWWW Image Optimizerの検索とインストール
プラグインのインストールは簡単です。
検索BOXにキーワードを入力すると 関連のプラグインが表示されます。

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

バージョンについて

現在、EWWWの 最新のバージョンは 6.2.4
ワードプレスの対応バージョンは 5.5以上 最新バージョン5.8.1まで
必須phpバージョンは7.1以上 になります。 (2021年 9月調べ)

バージョンの更新には サイトのバックアップなどの注意が必要です。
バージョンアップや バックアップのしかたについてはこちら↓

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

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

EWWW image - 初期設定項目1

EWWW image - 初期設定項目2

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

EWWW image - 初期設定項目3-完了画面

EWWW Image Optimizer 設定画面

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

設定の変更は 設定画面、画像圧縮の実行などの操作は メディアライブラリ もしくは
ツールの EWWW Image Optimizer から行います。

EWWW 設定画面 - 最適化スコアと基本タブ

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

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

基本

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

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

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

JPG品質レベル

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

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

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

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

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

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

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

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

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

サポート

EWWW Image Optimizer-サポート設定 - 埋め込み型のヘルプを有効化

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

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

日本語変換もなさそうですので 私はチェックを外しましたが
各項目の使いかたをもっと知りたい場合は 項目の横にあるクエスチョンマークをクリック
EWWWサイトへ移動 - 設定項目の詳細説明
こちらの画面は 日本語変換され分かりやすいページになっていますし
サポートが必要な場合は EWWWIOサポートから検索することもできます。

貢献

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

詳細設定 – Erable Ludicrous Mode –

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

Erable Ludicrous Mode をクリックで 詳細設定画面を開く

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

リサイズ

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

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

メディア画像の サイズ設定画面 |管理画面→設定→メディア

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

EWWW - リサイズの作成無効化

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

変換

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

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

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

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

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

それ以前に保存している画像には このような表示がされています。
EWWW Image Optimizer-自動的に画像最適化

個別に選択して最適化

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

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

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

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

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

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

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