ワードプレス高速化!画像圧縮プラグインCompress JPEG & PNG imagesの設定や使い方とメリット・デメリット

ワードプレスを利用していると、「画像が重くて表示が遅い」や「大容量化されたとは言え、サーバーの空き容量が少なくなっている」などのように画像のデータが気になったことはありませんか?

最近は、Webサイトの表示速度もSEOの評価対象にされているとの噂もあります。

だからと言って、サイトのイメージを決定付ける画像の品質は落としたくないものです。

そこで、今日、紹介するワードプレスのプラグイン「Compress JPEG & PNG images」を利用すると、画像の見た目はそのままで、簡単に画像を圧縮することができます。

Compress JPEG & PNG imagesをワードプレスに設定すると、見た目は変わらずサイトの画像のサイズを小さくして表示速度を高速化してくれますので、この記事ではプラグインのインストールから設定までを解説してきます。

Compress JPEG & PNG imagesの効果

Compress JPEG & PNG imagesを使用すると、大きな画像のデータ容量を圧縮できます

ちなみにですがCompress JPEG & PNG imagesで圧縮してみると、このくらいの効果がありました。

圧縮前 圧縮後
573.3KB 103.9KB
298.3KB 96.9KB
65.3KB 38.2KB
55.2KB 18.9KB
33.4KB 11.9KB

このように、圧縮前の画像のサイズによって圧縮率は異なりますが、大きい画像ほど大幅に小さなデータになります。

また、円グラフの表示を確認すると、このような表示が確認できます。

 

このブログの場合ではオリジナルの写真のサイズ合計が516.24MB、今の写真のサイズが288.98MBとなっています。

そのため、約228MBの画像が、見た目はほぼ変わらず圧縮できたことになります。

データの容量が小さくなればブログの表示速度も速くなりますし、サーバーの負担も軽減できますね。

Compress JPEG & PNG imagesで画像の一括圧縮をすると、次々にサイズが小さくなっていくので爽快感もありました。

画像サイズが小さくなる仕組み

画像サイズを小さくするには、縦横サイズを小さくする(リサイズ)するか、画像を圧縮するかの何れかになります。

Compress JPEG & PNG imagesは、両方可能なのですが主に画像を圧縮する方法でサイズを小さくして行きます。

画像圧縮方法はいくつも方法があるのですが、Compress JPEG & PNG imagesは簡単に言うと色数を減らす方式で圧縮を行います。

色数を減らすと画質が悪くなるのでは?と思いますが、パット見は殆どわかりません。

心配な方は、このプラグインのWEBサービスで試しに画像を圧縮して見比べてみる事をお勧めします。tinypng.com

Compress JPEG & PNG imagesを使う理由

Compress JPEG & PNG imagesは、同じ画像圧縮プラグインのEWWW Image Optimizerと良く比較されますので、簡単な特徴を比較表にしました。

Compress JPEG & PNG imagesEWWW Image Optimizer
無料版月500枚までロスレス圧縮のみ無料
圧縮方式非可逆圧縮 無料:ロスレス圧縮
有料:ロスレス/ 非可逆圧縮
有料版料金1万枚迄は、約1円/1枚
1万枚を超えると、約0.2円/1枚
約0.3円/1枚
サーバ負荷低い
外部サービスで圧縮
高い
自分のサーバーで圧縮

僕もどっちを使おうか悩みましたが、いろいろと検討した結果、 Compress JPEG & PNG images を使う事にしました。

導入を決めた理由は主にこの2点です!

  • 無料で非可逆圧縮が使える事
  • サーバー負荷が低い事

非可逆圧縮方式が使える

詳しい説明は避けますか、非可逆圧縮方式は、EWWW Image Optimizerで有料となっている程、一般的に圧縮率が高くなります。
写真数枚の抜き取り比較では差が出ない事もありますが、ブログのように大量に画像を圧縮すると非可逆圧縮方式の方がサイズが小さくなる確率が高いです。

サーバー負荷が低い

EWWW Image Optimizer は画像の圧縮を自分のレンタルサーバーのCPUの力を使って行います。そのため、圧縮作業中はサーバーが不安定になる可能性があったり、速度が遅くなる可能性が高くなります。

一方、 Compress JPEG & PNG images は外部のサービスtinypngのサーバーを利用して圧縮するため、自分のサーバのCPUへの負荷が低くなります。

また、 EWWW Image Optimizerはワードプレスのプログラムの強い権限を使用する部分があり一部のサーバーでは動作しない可能性があったりします。

以上の事から、画像圧縮には Compress JPEG & PNG images を利用する事に決めました。

最近のサーバーは高性能ですが、それでも画像が多いブログでは最初の圧縮の時に結構な負荷がかかる事が予想される為、アクセスの多いブログで EWWW Image Optimizer を使って一気に圧縮する場合は、 Compress JPEG & PNG images以上に様子を見ながらやると良いと思います。

Compress JPEG & PNG imagesを導入するメリット・デメリット

メリット

Compress JPEG & PNG imagesを利用するメリットは、

  • 画像のデータを圧縮できる
  • 個別・一括の操作ができる
  • 無料で利用できる(一部有料)
  • 操作がカンタン

と、このように手軽に画像を圧縮できることです。

デメリット

では、Compress JPEG & PNG imagesを利用するデメリットについても考えてみました。

  • 圧縮枚数が月500枚を超えると有料
  • アカウントの登録が必要

このように、月500枚を超えてしまうと有料になってしまうのは少し不便に感じるかもしれません。

ただ、ひと月に圧縮できる枚数の上限なので、毎月500枚までは無料で圧縮することが可能です。

そのため、一度に全てを圧縮できない場合も、毎月利用すれば無料でたくさんの圧縮ができます。

Compress JPEG & PNG imagesの使い方を解説

今日は下記の順序で解説して行きますので、一緒に設定していきましょう!

1.Compress JPEG & PNG imagesの準備方法

  ・インストールする

  ・アカウントを取得する

2.Compress JPEG & PNG imagesの圧縮設定

  ・New image uploadsについて

  ・image sizeについて

  ・Original imageについて

3.Compress JPEG & PNG imagesの一括圧縮方法

  ・課金の回避ポイント

4.Compress JPEG & PNG imagesの指定圧縮方法

5.Compress JPEG & PNG imagesまとめ

 

1.Compress JPEG & PNG imagesの準備(インストールしアカウントを取得する)

まず、ワードプレスでCompress JPEG & PNG imagesを利用するために必要な準備は、こちらの2つです。

  • プラグイン「Compress JPEG & PNG images」のインストール
  • アカウントの設定

以上の2つは、一度設定するだけで使い続けられるので、ササッと準備を済ませましょう。

Compress JPEG & PNG images をインストールする

Compress JPEG & PNG imagesをインストールする手順は、こちらの4つのステップです。

  1. プラグインの新規追加を開く
  2. 検索枠に「Compress JPEG & PNG images」と入力する
  3. 「今すぐインストール」を押す
  4. 「有効化」を押す

では、ワードプレスにプラグイン「Compress JPEG & PNG images」をインストールする手順を見ていきましょう。

ワードプレスのメニューからプラグインの「新規追加」を開く
プラグインの検索枠に「 Compress JPEG & PNG images 」と入力する
「 Compress JPEG & PNG images 」を探し、「今すぐインストール」を押す
インストールを終えたら「有効化」を押す

このような手順で「Compress JPEG & PNG images」をインストールすると、インストール済みプラグインの一覧に追加されます。

インストールの手順を実際に行った動画はこちらになりますので、よければ参考にされてください。

Compress JPEG & PNG imagesのアカウントを取得する

Compress JPEG & PNG imagesのアカウント取得は公式サイトからも行えますが、ワードプレスの設定画面から行うことも可能です。

ワードプレスから操作する場合は、「インストール済みプラグイン」の一覧から移動しましょう。

  1. 「setting」から設定画面に移動する
  2. 名前とメールアドレスを登録する
  3. 受信メールからサイトを開く
  4. 「APIKey」をプラグインに設定する

では、詳しく解説していきます。

インストール済みプラグインの一覧から「 Compress JPEG & PNG images 」を探し、「setting」を押す ※1
「名前」と「メールアドレス」を入力し、アカウントを作成する ※2
メール送信のメッセージが出たら受信したメールを開き、サイトを開く
APIKeyをコピーし、メール送信メッセージ横にある「Change API key」を押し枠に入力する

入力されている場合はそのまま保存を押しましょう。

このような手順でAPIKeyを保存すると、アカウントが紐づけされてCompress JPEG & PNG imagesが使用できるようになります。

英語でフリープランでは500枚まで圧縮することができると表示されればOKです。

※1 環境によってはインストール済みプラグインの一覧に「setting」が表示されないことがあります。

settingが見当たらない時は、ワードプレスのメニューにある「設定」から「Compress JPEG & PNG images」を開きましょう。

※2 Gメールを使用している場合にアドレスが重複してしまうことがあれば、”@マークの手前”に”+●●●(好きな英数字)”を入力すると別アドレスのように登録が行えます。

  • 例:testmail@gmail.com
  •  ⇒testmail+panda@gmail.com

このように指定したアドレスは、新規にメールアドレスを取得しているわけではありません。

上記の例の場合であればtestmail@gmail.comにメールが届くので、通常通りに使用することが可能です。

以上が、Compress JPEG & PNG imagesのインストールからアカウント取得までの操作方法です。

ちなみにですが、同様の手順についてはこちらの動画で分かりやすく解説していますので、よければ参考にされてください。

2. Compress JPEG & PNG images の新規画像の圧縮設定(好みに合わせて選択する)

Compress JPEG & PNG imagesはアップロード済み画像の選択・一括の圧縮だけでなく、新規アップロード画像の自動圧縮にも対応しています。

そのため、事前にワードプレスのメニューの設定「Compress JPEG & PNG images」から、新規アップロード画像の圧縮設定を行っておきましょう。

ちなみにですが、新規画像への圧縮設定は、こちらの3項目があります。

  • New image uploads

  • image size
  • Original image

Compress JPEG & PNG imagesの設定は英語で記載されている部分が多いので、迷ってしまうかもしれません。

ササッとオプション設定を済ませてCompress JPEG & PNG imagesを使いたい方は、こちらの設定にすることがおすすめです。

オススメの設定

  • New image uploads

    • 「Compress new images during upload」を選択
  • image size※1
    • 以下をチェックマークにする
      • Original image
      • Medium-768×?
      • Large-1024×1024
      • Thumb320-320×180
      • Thumb376×212-376×212
  • Original image※2
    • 設定なし

 

※1 使用しているテンプレートによって表示が異なる可能性があるため、画像の大きいものを選択しましょう。

※2 画像の詳細情報の設定なので、今回は設定していません。

お急ぎの方はここまでの設定を済ませたら「一括圧縮の方法」や「指定圧縮の方法」に進みましょう。

では、自分にあったオプション設定にカスタマイズしたい場合の、各項目の設定の詳細についてご紹介していきます。

New image uploadsオプションの設定方法

New Image uplodasの設定には、画像の圧縮を行うタイミングの設定があります。

そして、画像の圧縮のタイミングはそれぞれこのようになっています。

Compress new images in the background (Recommended) 画像のアップロードが終わったら自動的に圧縮される(ベンダー推奨)
Compress new images during upload 画像をアップロードしている最中に圧縮される
Do not compress new images automatically 自分で圧縮を行う

Compress JPEG & PNG imagesではアップロードを終えてから自動的に圧縮される方がオススメされているようです。

たしかに画像の圧縮とアップロードが同時進行することで、アップロード自体に時間がかかることがあります。

しかし、1枚単位などのアップロードではさほど時間が変わらないので、アップロードと同時に圧縮が終わる方が使いやすく感じるのと、 backgroundでは他の画像圧縮系のプラグインとバッティングする時があるとの記事があったので、僕はduring uploadを使っています。

この辺は、自分の好みや環境によるので試行錯誤することをお薦めします。

image sizeオプションの設定

ワードプレスは元々自動でいくつかの画像サイズを作成します。

そして、image sizeオプションでどこまでの画像を圧縮するのかを設定することができます。

チェックボックスにチェックをすると圧縮対象となるので、すべての画像を圧縮したい時は全てにチェックを付けましょう。

しかし、全てを圧縮対象にすると、1枚の画像から圧縮対象となる画像が複数個となります。

圧縮率はオリジナルや大きな画像の方が多いため、圧縮枚数の消費を抑えたい時は画像サイズの大きなものを選択しましょう。

オススメの設定

オススメの設定は、大きな画像のみを選択したこちらです。

できるだけ圧縮枚数の消費を抑えたい方は、大きな画像のみを選択しましょう。

ちなみにですが、同じ画像を使用して全てを選択した場合と、大きな画像のみを選択した場合の違いについて検証してみました。

全てを選択 大きい画像のみ

このように、どちらもTotal Savings 20%(23.4KB)と記載されており、小さな画像は圧縮されていないことがわかります。

また、上記の場合では選択している大きめな画像の中でも、データが小さく圧縮されていないものがあります。

そのため、大きめの画像だけを選択した設定でも十分な圧縮の効果を得ることが可能です。

Original imageオプションの設定

Original imageの設定では、画像圧縮で消えてしまうことの多い情報や画像のリサイズの設定が行えます。

Resize the original image 数値の大きな画像を自動リサイズして圧縮する
Preserve creation date and time in the original image 画像の撮影日時などの情報が残す
Preserve copyright information in the original image 画像の著作権情報を残す
Preserve GPS location in the original image (JPEG only) GPS情報などを残す

このように、画像の情報を残したい時は、必要なデータの項目にチェックを入れましょう。

好みの設定にカスタマイズすることができるので、必要に応じて設定を行うことがおすすめです。

ここまでのCompress JPEG & PNG imagesの3項目の設定は、こちらの動画で詳しく解説していますのでよければ参考にされてください。

3.アップロード済み画像を一括圧縮する
(Bulk OptimizationStart Bulk Optimizationを押す)

ワードプレスにCompress JPEG & PNG imagesを設定すると、メディアライブラリの画像を一括圧縮することができるようになります。

そして、アップロード済みの画像を一括圧縮する手順は次の3つです。

  1. メディアライブラリの「Bulk Optimization」を開く
  2. 「No thanks.continue anyway」を押し、「Start Bulk Optimization」を押す
  3. 圧縮が終わるまで待つ

では、画像を一括圧縮する手順について見ていきましょう。

ワードプレスのメニュー「メディアライブラリ」の「Bulk Optimization」を開く
ボタン下の「No thanks.continue anyway」を押し、「Start Bulk Optimization」を押す
圧縮が終わるまで待つ

このような手順で行うと、無料の範囲でできるところまでが圧縮されます。

そのため、圧縮されたデータの一覧を見ると、圧縮枚数を超えた分は失敗を意味する「✖」の表示があります。

無課金でたくさんの画像を圧縮したい時は、「課金の回避方法」を参考にされてください。

そして、アップロード済み画像一括で圧縮する方法についてはこちらの動画で実際の操作を紹介しています。

課金の回避方法

月500枚迄は無料で圧縮できます。

クレカ等を登録しなければ、500枚を超えた分はお金を払わないと圧縮されないだけなのでその辺は安心してください。

一応、ダッシュボードの簡単な見方を説明しておきます!

Compress JPEG & PNG imagesで画像の圧縮を始める前のデータが表示されているメディア「Bulk Optimization」の画面では、以下の内容が確認できます。

UPLOADED IMAGES 圧縮の対象となる画像の数

UNCOMPRESSED IMAGE SIZES

圧縮可能な枚数

ESTIMATED COST

課金対象の金額 ※3
円グラフ 全体のどのくらいが圧縮されているのか

ちなみに円グラフについては序盤に軽く説明していますが、全体の画像と圧縮済みの画像の統計が表示されます。

そのため、この画像の場合は、画像の44%が圧縮済みとなります。

また、グラフ横に表示されている3項目は、それぞれ次の数値が表示されています。

image sizes optimized 最適化された画像数
initial size 圧縮前の画像サイズ
current size 現在の画像サイズ

このように、圧縮前と圧縮後の変化も確認できるので、どのくらい効果があるのか気になったときは確認してみましょう。

※3 Compress JPEG & PNG imagesは、月500枚までの圧縮が無料となっています。

そのため、無料の上限を超えた枚数の場合は課金対象となります。

そして、圧縮可能な枚数が無料の範囲である500枚を超えていると、課金の対象となってしまいます。

しかし、Compress JPEG & PNG imagesは月500枚まで無料で利用できるため、数ヶ月に分けて利用すれば無料で圧縮作業を行うことが可能です。

急ぎの作業の場合を除き、画像の一括圧縮の方法で圧縮しきれなかったものは翌月に行うことがおすすめです。

APIKEYを変えると言う荒業はなるべく止めておきましょう!

4.圧縮したい画像を指定して個別に圧縮する(メディアから選択する)

Compress JPEG & PNG imagesを利用して画像を指定しながら圧縮する時は、次の手順で操作を行います。

  1. 「メディア」を開く
  2. 画像を選び、「Compress」を押す

このように直接選ぶことが出来るので、画像の大きなものだけを選びたい時などに活用しましょう。

では、画像を一つずつ選択しながら圧縮していく方法についてみていきましょう。

ワードプレスのメニュー「メディア」を開き、リスト表示にする
圧縮したい画像を探し、右側にあるボタン「Compress」を押す

このように、「Compress」ボタンを押すだけで圧縮が行えます。

クルクルと回っているマークが消えると、画像の圧縮が完了した状態です。

画像容量の気になる画像のみを圧縮したい時は、メディアから直接圧縮を行いましょう。

実際にCompress JPEG & PNG imagesを利用して、ひとつずつ画像を圧縮している動画はこちらになります。

Compress JPEG & PNG images の使い方についてのまとめ

ワードプレスの画像を簡単に圧縮できるCompress JPEG & PNG imagesは、

  • 画像の一括圧縮する
  • 画像を選択して圧縮する
  • 画像のアップロード時に圧縮する

と、過去の画像も未来で使用する画像も圧縮することができます。

無料で利用できる範囲は月500枚までですが、個人的な仕様であれば十分足りる程度の圧縮が可能です。

手軽に利用できるので、気になる画像を軽量化しましょう。