WordPressアップロード画像が自動的に圧縮されるEWWW Image Optimizer

ewww image optimizer

ワードプレスに画像を挿入するたびに圧縮するのは超面倒です。

でもEWWW Image Optimizerを使えばアップロードした画像が自動的に圧縮されるようになります。

また、過去のアップロード画像もこのプラグインを使えば一緒に圧縮することができるのでとても優れたツールといえます。

さらに圧縮時に画像のサイズ変更(リサイズ)もできるというから驚きですね。

最適化を行いGoogleからの評価を下げないこと

画像を使ってユーザーにとって分かりやすく理解しやすいページを作ることはとても大事なことです。しかし、各ページに画像が増えてくると表示速度が徐々に遅くなってきますよね。しかし、 これは仕方のないことです。

なぜなら、ユーザーにとって理解しやすい記事を作るのが大前提だからです。

しかし、ページの表示速度が遅くなるという事はGoogleからの評価が下がるということでもあり、サイト運営において何一ついいことがありません。

なので、画像を使うときにはしっかりと圧縮してからワードプレスに插入するのがベストなわけです。

その大事な作業を画像アップロード時に自動でやってくれるのがこの EWWW Image Optimizer ということです。

インストール方法

まずは、左メニュー>プラグインにカーソルを合わせて新規追加をクリックします。

すると右上に検索窓がありますので、EWWW Image Optimizerと入力します。

  1. 今すぐインストールをクリック
  2. 有効化をクリック

今すぐインストールをクリックすると、インストール中と表示されますのでしばらく待ちます。

インストール中

有効化ボタンが表示されますのでクリックします。

有効化すると左メニューの「設定」にEWWW Image Optimizerが追加されているはずです。

有効化

EWWW Image Optimizerできること

できることは以下の3つです。

中でも過去のアップロード画像をすべて一括で最適化(圧縮)できるのはとても嬉しい機能です。

  • アップロードしたときに自動で圧縮
  • アップロード時に設定サイズにリサイズ可能
  • アップロード済み画像も一括で圧縮(最適化)
注意
画像のリサイズをするときには注意が必要です。リサイズが行われた画像は元のサイズに決して戻ることはないのでバックアップしておくと安心です。

ワードプレスのバックアップ方法はこちらの記事を参考にどうぞ!

バックアップを手動で取ったり定期的に取ったりできるので初心者の方にもオススメなプラグインです。

重要設定箇所は4つ

設定をしておくべきところは4箇所で、ベーシック、イージーモード、リサイズ、変換です。

この4つを確認しておけばOKです。

  1. ベーシック(メタ情報を削除する)
  2. イージーモード(遅延読み込み設定)
  3. リサイズ
  4. 変換(自動変換を防ぐ)

ベーシック

ベーシック設定をクリックすると上の方にメタデータを削除と書かれていますね。ここにチェックを入れます。

ベーシック

画像の中にはカメラのモデル(型式)や撮影時間(ブログにこれらの情報はいらない)などの情報が一緒に含まれています。

これらのメタ情報を圧縮時に削除することでより画像容量を軽くさせることができます。

イージーモード

遅延読み込みにチェックを入れます。

イージーモード

遅延読み込み機能とは、コンテンツ内すべての画像を読み込まずにユーザーが画像を表示する直前に画像ファイルが読み込まれるようにした機能です。

この機能を利用することでページスピード速度を上げることが可能になります。

※他のプラグイン等で遅延読み込み機能を使っている場合にはここへのチェックは不要です。

リサイズ

画像をリサイズしたいときには幅の上限と最大高さをピクセル数値で入力します。

また、過去の画像をまとめてリサイズしたいときには、既存の画像をリサイズにチェックを入れておきましょう。

(例)幅の上限(700)最大高さ(430)

リサイズ
補足
アップロード済みの画像をまとめてリサイズするときには「既存の画像をリサイズ」にレ点チェックを入れておきます。

変換

コンバージョンリンクを非表示にチェックを入れます。

変換

コンバージョンとは成果などの意味もありますが、ここでは変換という意味で使います。

画像ファイルを保存するときには、一般的に画像に合わせた画像フォーマットを使用することで容量も減らせて画像も綺麗に保存することができます。

例えば、一般的に色数の少ない画像には拡張子「~.png」などが推奨されていますが、「コンバージョンリンクを非表示」にチェックを入れておかないとこの拡張子が勝手に変換されてしまうことがあります。JPG⇒PNG、PNG⇒JPGなど

拡張子が勝手に変換されることで画像にノイズが出たり、逆に画像容量が大きくなってしまうことがあるため、ここには必ずチェックを入れておくことをオススメします。

画像に適した拡張子を使うことで容量も落とせて綺麗に表示させられます。

リサイズ時に注意すること

リサイズするときに注意しておくことは?

使っているテーマのコンテンツ幅の確認

リサイズするときには使っているテーマの最大幅を基準にしてリサイズを行った方がいいです。

例えば、あなたが使っているテーマのコンテンツの幅が最大680ピクセルだとします。

ということは、680ピクセルの画像ならピッタリと記事にはまります。

しかし、680ピクセル以下の画像を挿入したときにはそれよりも画像が小さくなりますよね?

適当のサイズでリサイズしないように、使っているテーマの幅を一度確認してみることをオススメします。

注意
稀にリサイズ後に画像表示が崩れることがあるようです。不安に感じる人は無理に作業を進めずに保留にしておきましょう。

各ファイルの圧縮率の確認

画像をアップロードした後にファイルの容量がどのくらい削減されているのか見ておきましょう。

700×430にリサイズ設定してアップロードしてみる

1240×700(150KB)⇒700×430にリサイズ設定してからファイルをアップロードしてみます。

メディアのアップロード

ファイルの圧縮率を確認してみる

どれくらい容量が削減されているかを調べるには、リサイズ画面に移動してから最適化された画像を表示するをクリックすると確認することができます。

最適化ステータス

すると、下図のような画面に切り替わります。

下図を見てもらうとサイズ違いの画像が縦に5ファイル並んでいるのでなんで?と思う方もいるのではないですか?

これは、ワードプレスのデフォルト設定や各テーマによって自動的に作られている画像があるからです。

例えば、すごく小さい画像がありますけどこのような画像は記事一覧などに使われるているサムネイルだったりします。

各画像のサイズ

一番下を見てもらうと、ファイルサイズが一つだけ書かれていないことにお気づきでしょうか?

これが700×430ピクセルにリサイズされた画像(元の画像)になります。

元の画像にはファイルサイズが入力されないのです。

◯◯.pngとなっていて◯◯×◯◯.pngとなっていません。

このようにサイズが入力されていないものは元の画像だと判断することができるわけです。

リサイズ後の画像ファイルの圧縮率を確認すると、50.9%圧縮されているのが分かりますね。

アップロード済み画像の一括最適化

この機能を使えば画像を一括で最適化することができます。

例えば、「今まで圧縮することなくワードプレスに画像をアップロードしていた」「圧縮した画像もあるけど圧縮していない画像もある」など、圧縮画像と非圧縮画像が混在していても全く問題なく圧縮できます。

  1. 左メニュー>メディア>一括最適化
  2. 最適化されてない画像をスキャンする
  3. 画像を最適化

左メニューからメディア>一括最適化をクリックしましょう。

一括最適化

画面が遷移するので「最適化されていない画像をスキャンする」をクリックしましょう。

最適化されてない画像をスキャン

スキャンが終わるまで少し待っていると「◯◯点の画像を最適化」と表示されますので、そのボタンをクリックします。

クリックするとサイト内の最適化が始まります。

このときリサイズ設定で「既存の画像にリサイズ」にチェックを入れているとリサイズも一緒に行われます!
8点の画像を最適化

今回はサイト内に使っている画像数が少なかったためにあっという間に完了しましたが、1時間くらいかかる場合もあるようなので時間をうまく利用して実行した方がいいかもしれませんね。

最適化ログ

以上、EWWW Image Optimizerの使い方の解説でした。それではまた

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください