
インストール後、簡単な設定をするだけでブログの画像サイズを軽くできる
EWWW Image Optimizer の設定方法と使い方の解説記事です。
ブログの記事が積み重なってくると、
色々な原因によって、ページの表示が遅くなる問題が出てきます。
そして、その大きな理由の一つが「画像のファイルサイズ」です。
ファイルサイズが大きい画像を使用していると、
ページの表示速度が遅くなるだけでなく、
サーバーの容量も圧迫したりと、なにもいいことがありません。
簡単操作で、まとめて画像のファイルサイズを小さくしてしまおうというわけです!
すでにブログで使っている画像も、まとめて圧縮することができます
目次
1.EWWW Image Optimizer のインストール方法
EWWW Image Optimizer は、ワードプレスの公式プラグインです。
管理画面のプラグイン追加ページからインストールできるほか、
プラグイン公式ページからダウンロードして、インストールすることも可能です。
サイトリンクEWWW Image Optimizer プラグインページ
プラグインのインストール方法がわからない方は、以下のページを参照してください。
参考リンクWordPressにプラグインをインストールする2つの方法
似たようなプラグインがありますが、「EWWW Image Optimizer Cloud ではない方」をインストールしてください。
また、両方同時に使用することはできないので注意してください。
2.EWWW Image Optimizer の設定方法
EWWW の設定は、管理画面 > プラグイン > 設定 から行います。
EWWW で設定する項目は以下の2つ。
- 基本設定
- 変換設定
その他については、デフォルトのままでOKです。
2-1 基本設定
基本設定項目では、メダデータを削除のチェックをオンにしておきましょう。
こうしておくことで、EXIF をはじめとする
ブログに必要のない画像の情報(メタデータ)を自動的に削除してくれます。
プライバシー保護の観点からも、必ずチェックをオンにしておいたほうが良いといえます。
2-2 変換設定
次に、変換設定のタブから、変換リンクを非表示のチェックをオンにしておきましょう。
これがオフのままだと、管理者以外のユーザーにも
変換リンクが表示されるので、勝手に画像を変換されてしまう可能性があります。
3.EWWW Image Optimizer の使い方
EWWW の基本的な機能は、2種類あります。
- 新しく追加した画像の圧縮
- アップロード済みの画像の圧縮
使い方をそれぞれ見ていきましょう。
3-1 新しく追加した画像の圧縮
EWWW Image Optimizer は、インストールするだけで、それ以降に追加した画像を自動で圧縮してくれます。
圧縮度合いは、メディアライブラリの表示を、一覧モードにすることで確認することができます。
圧縮された画像は、
・88.8KB → 76.9KB(15.3%減少)
・133.9KB → 113.5KB(13.2%減少)
といった感じで、ほとんどが約10~15%程度サイズダウンしていました。
3-2 アップロード済みの画像の圧縮
すでにアップロード済みの画像は、まとめて圧縮することができます。
管理画面 > メディア > 一括最適化 へと進みましょう。
次の画面で、最適化されていない画像をスキャンする をクリックします。
すると自動で最適化がはじまるので、終わるまで画面を切り替えずに待ちましょう。
画面に完了と表示されたら、画像の圧縮はすべて終了です。
4.さらに画像を圧縮したいときは
ブログにアップロードする前に、事前に画像を圧縮しておくことで
さらに画像サイズを小さくすることができます。
「画像圧縮AC」という、無料で画像を圧縮できるサイトがあります。
ドラッグ&ドロップで圧縮したい画像を入れるだけで
簡単に圧縮することができるので、こちらを併用してみるのもいいでしょう。
サイトリンク画像圧縮AC
画像圧縮AC の使い方は、以下の記事で解説しています。
さいごに
ブログの表示を重くする大きな要因となる、画像を圧縮することができる
EWWW Image Optimizer プラグインの、設定方法と使い方について解説しました。
使い方も簡単な上に、高い効果が見込めるプラグインなので
まだ導入していないという方は、ぜひ一度使ってみてください。
さいごにまとめをしておきます。
- EWWW Image Optimizer の設定方法
- EWWW Image Optimizer の使い方
- さらに画像を圧縮する方法
導入しておきたいプラグインだね
注目の記事WordPressブログの画像の入れ方と効果的な使い方
注目の記事画像加工用ソフトの決定版「PhotoScape」の使い方