WordPressサイトの画像をかなり圧縮できるプラグイン「Compress JPEG & PNG images」

2020/02/28 情報を更新いたしました。

個人法人に限らずWEBサイトを運営していると、規模の大小があっても画像を多く活用しているでしょう。ただ、サイト内に画像が増えすぎると容量が大きくなり、ページの読み込みのスピードが落ちてしまいます。サイトを閲覧してもらうために読み込みスピードを最速化することは言うまでもなく重要ですが、ただ単に容量を削ると画像が汚くなくなり、ページを見た瞬間に悪い印象を与えてしまう懸念もあるわけです。

というわけで、今回は画質の劣化を抑えつつ、画像のファイルサイズをグッと小さくできるプラグイン「Compress JPEG & PNG images」をご紹介いたします。そもそもWeb上で使える画像の性質について分からない方はこちらの動画解説を見た方が分かりやすいかもしれません。

「Compress JPEG & PNG images」とは

画像ファイルを圧縮できるWEBサービス「TinyPNG」をWordPress上で使えるようにしたプラグインです。一度インストールしてしまえば、サイトの画像を圧縮する度にTinyPNGにアクセスするよりも効率が良さそうですね。プラグインを活用するには、「TinyPNG」のアカウントが必要です。

「Compress JPEG & PNG images」のインストール

WordPressの管理画面から、新規追加をクリックして、「Compress JPEG & PNG images」と検索するか、下記ボタンよりダウンロードできます。

Compress JPEG & PNG images

「TinyPNG」のアカウント作成

インストールが完了すると、まず「TinyPNG」のアカウントを作成する必要があります。プラグインのsetting画面から必要事項を入力し、アカウントを作成します。

名前とメールアドレスを入力して「Register Account」をクリックすると登録したメールアドレス当てにメールが届くので、メール本文の下記画面で「Activate your account」をクリックします。

すると下記画面が表示され、APIキーを付与されます。

その後、プラグインの設定画面に戻ると下記の様に認証完了画面が表示されます。画面に変化がない場合はキャッシュをクリアしてみてください。

「Compress JPEG & PNG images」の基本設定

画像を圧縮するタイミングを設定

下記箇所で、以下の3種類から圧縮方法を選択できます。

• 画像をバックグラウンドで圧縮する
• 画像をアップロード中に圧縮する
• 画像を自動で圧縮しない

プラグインでは、一番上を推奨していますが、他のプラグインとの相性によって問題が発生することもあるようです。基本的に一番上にチェックを入れておき、なにか不都合があれば、切り替えるというぐらいのニュアンスでいいと思います。

圧縮する対象の画像を設定

圧縮する対象のファイルを下記のようにリストアップしてくれてます。こちらは適用しているテーマによって表示が異なりますが、それぞれのチェックボックスにて設定が可能です。

基本的にどのテーマを適用していても一番上のフルサイズの画像は、容量がもっとも大きくなるはずなので、こちらにはチェックを入れておきましょう。その他は、あなたのサイトの画像の量に合わせて任意にチェックを入れましょう。

ただし注意点として、無料版では一カ月で圧縮できる画像数が500枚までと決まっております。サイトの画像数に合わせて圧縮する対象の画像を変更しましょう。上記のようにすべてにチェックを入れるとすぐに上限に達してしまいます。圧縮したい画像を厳選してチェックを入れましょう。

オリジナルの画像をリサイズする機能

こちらの設定では先ほどの設定で一番上の「Original image (overwritten by compressed image)」にチェックを入れると、下記のチェック項目が表示されます。　

「Resize the original image」にチェックを入れると、アップロードされる全ての画像の最大幅と高さを指定できます。指定のサイズにリサイズされた画像が追加で生成される設定です。アップロードされる画像が自動で指定のサイズにリサイズされますが、リサイズされた画像も一枚としてカウントされるので、無料で使いたい場合はチェックを外しておいた方がベターでしょう。

その下のチェックボックスで、画像を作成した日付やコピーライト、GPS情報（JPEG限定）を保持するかどうかの設定ができます。

実際に圧縮してみる

すでにアップロードしている画像を個別に圧縮する方法

WordPress管理画面のメディアを開くと、下記の様に右側に「Compress」というボタンが表示されているので、ワンタッチで任意の画像を圧縮可能です。サイズの大きな画像のみを圧縮すれば、制限されている枚数を節約できますね。

アップロードされている画像を一括で圧縮する方法

管理画面のメディア内にある「Bulk Optimization」をクリックすると下記の画面が表示されます。

赤枠に数字が並んでいますが、左から順に、「メディア内にアップロードされている画像数」「圧縮されていない画像数」「かかるコスト」です。コストが$0.00USDのままであれば、無料枠の範囲内ですので、「Start Bulk Optimization」をクリックします。逆に500枚以上の画像があれば、コストが表示されるはずですので、上記の個別圧縮でサイズの大きな画像のみを選択しましょう。

圧縮が完了すると下記の画面が表示され、容量の何%を削減されたのかを表示してくれます。

サイト内の画像を一気に圧縮するので、一カ月で上限を超える可能性は格段に上がります。どうしても500枚以上の画像を一カ月以内に圧縮したければ、「TinyPNG」のサイトに画像をアップロードして圧縮する力技もアリですね。

気になる画質の差

試しに一枚圧縮した画像を並べてみました。上が圧縮前、下が圧縮後です。肉眼ではあまり差はわかりませんね。ただ容量に関しては、約700KBあったものが約200KBまで圧縮されているので、サーバーの負担や読み込み速度は改善されるはずです。

ちなみに、以前弊社の記事で紹介していた下記のプラグイン「EWWW Image Optimizer」で全く同じ画像を圧縮したところ、約600KBまでしか圧縮されませんでした。「Compress JPEG & PNG images」では、200KBまで圧縮されてるので、結構差がありますね。しっかりと画像を圧縮したいのであれば、無料でも500枚まで圧縮できるこちらの方が良いでしょう。

まとめ

画像を多く使うサイトでサイトの読み込み速度が気になるという方は、こちらのプラグインで一斉に全画像を圧縮してみるのもアリです。

TinyPNGのサイトで画像を圧縮するには、

1. サイトに画像をアップロードする
2. 圧縮した画像をダウンロードする
3. WordPressにアップロードする

という3工程必要ですが、「Compress JPEG & PNG images」を使えば、ワンタッチで一気に圧縮可能です。画像にファイルによって圧縮具合に差がでるようですが、画像を多く使うサイトの容量を軽くしたいのであれば試してみる価値はあるでしょう。