<>

ページの読み込み速度を上げる方法!EWWW Image Optimizerで画像圧縮| WordPressプラグイン

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

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

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

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

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

EWWW Image Optimize

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

プラグイン新規追加画面-EWWW Image Optimizerの検索とインストール
検索BOXにキーワードを入力し EWWW Image Optimize が表示されましたら
今すぐインストールをクリック、有効化します。

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


バージョンについては 現在、EWWWの 最新のバージョンは 6.2.4
ワードプレスの対応バージョンは 5.5以上 最新バージョン5.8.1まで
必須phpバージョンは7.1以上 になります。 (2021年 9月調べ)
バージョンの更新には サイトのバックアップなどの注意が必要です。

バージョンアップや バックアップのしかたについてはこちら↓
Luxeritas ( ルクセリタス ) の かんたんバージョンアップ|WordPress

初期設定

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

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

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 など 拡張子によって画像の品質の特徴があり、
その拡張子を変更することで 画像の容量を少なくすることができます。

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

↓スクリーンショットについての記事で 拡張子について書いています。
【画面キャプチャ】 PriScVista アルファチャンネル と拡張子

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

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

それ以前に保存している画像には 今すぐ最適化!(画像 右)と表示されています。

個別に選択して最適化

個別で最適化をする場合、今すぐ最適化!をクリックするか いくつかの最適化したい画像に
チェックを入れて 一括最適化を選択し適用をクリックします。

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

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

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

これは、1枚の画像に対してさまざまなサイズの画像が作成されるためです。

先ほどのリサイズ の設定画面でも出てきました ダッシュボードのメディア設定画面や
Luxeritas の管理画面で設定された画像サイズです。

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

この不要な画像についての詳しい記事はこちらです。
【データベース最適化】メディア画像のサイズ設定と不要な画像を削除