WordPressでサイト高速化!EWWW Image Optimizerのおすすめ設定方法

サイト運営で欠かせないのが、サイトの表示の高速化。

サイズの大きな画像をそのまま載せてしまうと、ページを開くのに時間がかかってしまいます。ページがなかなか開かないとイライラしますよね。

Aoha

せっかくたどり着いてくれた読者やお客様との「出会い」を逃してしまうかも。

 

そこで今回は、WordPressでサイトを高速化するための画像データの圧縮処理についてお伝えしたいと思います。

無料で使える画像圧縮プラグイン「EWWW Image Optimizer」を使った、おすすめの方法をご紹介しますね。

WordPressで簡単に画像データを圧縮するには?

WordPressで画像処理によるサイト高速化のためには、

  1. 画像データを圧縮する
  2. 画像サイズを小さくする

という、2本立てで対策していきます。

 

Aoha

そもそも余分な画像を作らない設定については、画像の自動生成機能をオフにする設定をご覧ください。

 

ではまず初めに「画像データを圧縮する」ため、画像圧縮プラグイン「EWWW Image Optimizer」を導入しましょう。

画像圧縮プラグイン「EWWW Image Optimizer」の設定方法

EWWW Image Optimizerは、WordPressで取り込んだ画像を無料で何枚でも圧縮してくれるプラグインです。 

まずはインストールして有効化しましょう。

WordPressにログインしたら「プラグイン>新規追加」をクリックし、検索窓に「EWWW」と入力すると出てくるはずです。↓

 

 

有効化できたら、「設定>EWWW Image Optimizer」で設定画面を開きましょう。

次に、表示されているBasicタブ(基本設定)で、Remove Metadta(メタデータを削除)にチェックが入っていることを確認します。

 

EWWW Basic基本設定


さらに、Convertタブ(変換設定)にでは、「コンバージョンリンクを非表示」にチェックを入れましょう。

 

EWWW Convert変換設定

 

次に2つ目の対策として、画像サイズを小さくする設定を加えていきます。

EWWWの「リサイズ設定」で画像の高さと幅を小さくする

スマホやカメラで撮った画像って、すごく鮮明だしサイズも大きいですよね。

でも、サイトで表示する画像にそこまで大きなサイズは必要ありません。
むしろ、ページ速度が遅くなってしまう原因に。

 

Aoha

一般的なWebサイトやブログなら800pxくらいで十分です!

 

 

そこで、EWWW Image Optimizerで、最適なサイズになるよう変更しちゃいましょう。

先ほどの設定画面で「リサイズ」タブをクリック。Resize Imagesで、幅の上限を変更してください。

 

EWWWリサイズ設定

 

これだけで、画像データがぐぐっと減り、さらにサイトでの見た目も問題ありません。実際の圧縮後の画像とデータは、後ほどお見せしますのでお楽しみに。

では続きまして、EWWW Image Optimizerの使い方をご説明しますね。

EWWW Image Optimizerの使い方

WordPressにEWWW Image Optimizerを導入すると、以降に取り込む画像データはすべて設定どおりに圧縮してくれます。つまり、特に操作は不要。

また、導入する前に取り込み済の画像は、一括最適化ができますよ。

メディアにある画像を一括最適化

すでにメディアにある画像データを圧縮するには、ダッシュボードの「メディア>一括最適化」をクリック。

EWWW メディア一括最適化

 

次の画面で「最適化されていない画像をスキャンする」をクリックすると、対象の画像ファイルを探してくれます。

EWWW メディア一括最適化スキャン

 

スキャンが終わると、次に準備完了の画面になるので「最適化を開始」をクリック。

 

EWWW メディア一括最適化

 

実行が終われば、圧縮完了です。

 

 

ではいったい、

  1. 画像データを圧縮する
  2. 画像サイズ自体を縮小する

 

という2つの対策で、「どれくらいデータが削減できたのか」「どんな画像になったのか」を、ご覧いただきましょう。

 

こちらが、横幅800pxにリサイズ&圧縮した後のサンプル画像です。↓↓

 

リサイズ&最適化した画像


いかがでしょう。パッと見て特に問題ないのではないでしょうか。

 

元画像は

  • 幅3232px、高さ2424px
  • データサイズは4.5MB

でした。これが圧縮後は、

  • 幅800px、高さ600px
  • データサイズは66KB

と激減。98.6%のデータ削減に成功しました。

 

EWWWデータ圧縮効果

 

見た目も変わらないなら、データは軽いほうがいいですよね。

 

ここで注意!
ヘッダー画像など、大きなサイズが必要な場合は、リサイズ不要。
EWWWのリサイズ設定で「画像の上限幅」を0に変更してから、取り込みましょう!

 

 

ではおまけ情報として、

「拡大して画像が荒くなるのはイヤ。画像サイズは小さくしたくない」

という場合に、別の方法があるのでご紹介しますね。

おまけ情報:大きな画像でさらに圧縮率をあげるには

突然ですが、画像圧縮方法には次の2種類があります。

  • 可逆圧縮(圧縮前のデータに戻せる。圧縮率は低め)
  • 非可逆圧縮(圧縮前のデータに戻せない。圧縮率は高め)

 

Aoha

可逆圧縮=ロスレス圧縮、非可逆圧縮=ロッシー圧縮とも呼ばれます。

 

 


実は、EWWW Image Optimizerを無料プランで利用できるのは基本的に可逆圧縮なので、圧縮率は低めです。

試しに、先ほどのの画像をリサイズなしで圧縮してみたところ、4.5MB→約3MBになりました。(うーん、あまり減ってないかも。)

 


では非可逆圧縮の場合はどうなるのか、気になりますよね。


オンラインで、画像ファイルを簡単に非可逆圧縮できるのが「TinyPNG」というサイト。

TinyPNG

パンダが目立つTinyPNGのトップページ

 

圧縮したい画像を選択(もしくはドラッグ&ドロップ)するだけで、一気に圧縮してくれる有名なサービスです。

 

先ほどの元画像を圧縮してみると、なんと451.9KBになり、90%のデータ削減ができました。

 

TinyPNGでデータ圧縮

 

Aoha

同じサイズ、同党の画質でこれだけ圧縮できるなんてスゴイ。

 

 

ただし

  • 一度に圧縮できるのは20枚まで
  • データサイズは5MBまで

という制限ありです。


実はTinyPNGには、WordPressで使えるプラグイン版「Compress JPEG & PNG images」もあり、リサイズ設定も可能です。

 

ただしユーザー登録が必要で、圧縮できるのは月500枚まで
以降は有料になります。

「500枚も圧縮できるなら余裕じゃない?」

と思われるかもしれませんが、画像はWordPressによる自動生成の他、テーマによって必要なサイズが複数枚作られます。そのため、圧縮可能枚数はもっと少なくなる計算。(自動生成が3枚なら、1枚につき4枚生成。月に圧縮できるのは500÷4=125枚に)


ちなみに、EWWW Image Optimizerでも同様の非可逆圧縮は可能です。


プラグインを有効化すると、次のようなメッセージが表示されたはず。

FreeAPI

プラグインの使われ方調査をとプラグインの改善のために EWWW Image Optimizer へ匿名でデータ送信することを許可しますか ? トラッキングを有効しデータを送信することで500枚の無料画像クレジットが以下の管理者メールアドレスに付与されます: xxxxx@xxx.com。これには機密データは含まれません。

 

このメッセージで「許可する」をクリックすると、APIキーがメールで送られてきます。送付されたキーを入力することで、500枚まで非可逆圧縮できるようになりますよ。(以降は有料です)

EWWW APIキー

 

画像の圧縮方法はいろいろありますので、あなたのサイト運営に合わせて選択してくださいね。

一般的なサイトやブログ運営では、今回ご紹介した設定内容でEWWW Image Optimizerを利用するのがお手軽なのではと思います。

 

では最後に、今回のおさらいをしてみましょう。

WordPressで画像データを軽くする方法まとめ

読者やお客様のために、サイトの表示速度を上げる対策は必須。

なかなか開かないサイトは、読まれる前に「戻る」ボタンを押されてしまうかも。

 

そこで今回は、WordPressでサイトの高速化に欠かせない画像データの圧縮方法についてお伝えしました。

画像データを圧縮に便利なのが、プラグイン「EWWW Image Optimizer」

リサイズ設定をすることで、さらに軽くすることができましたね。

EWWWは導入するだけで、次回から取り込む画像はすべて設定通りに圧縮してくれます。一括最適化もできるので、未圧縮のデータは後から一度に処理可能。


一般的なサイト運営であれば、今回おすすめしたEWWWを利用する方法が手軽で簡単かと思います。


また画像の圧縮方法は

  • 可逆圧縮(圧縮率低め)
  • 非可逆圧縮(圧縮率高め)

の2種類があり、EWWWで無料で利用できるのは基本的に可逆圧縮でした。

 

データ削減を強化したいなら、非可逆圧縮ができるTinyPNGの利用もおすすめ。
TinyPNGはプラグイン版もありますが、無料で利用できるのは月に500枚までという制限つき。

Aoha

毎月少ししかアップしないし、大きなサイズのままで圧縮したいという場合はTinyPNGを利用するのもあり♪

 

どの方法を採用するかは、あなたのサイトの特長に合わせて検討してください。
参考になればうれしいです。

 

最後までお読みいただき、ありがとうございました。