ワードプレスを利用していると、「画像が重くて表示が遅い」や「大容量化されたとは言え、サーバーの空き容量が少なくなっている」などのように画像のデータが気になったことはありませんか？
最近は、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 images | EWWW 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枚までは無料で圧縮することが可能です。
そのため、一度に全てを圧縮できない場合も、毎月利用すれば無料でたくさんの圧縮ができます。
Compress JPEG & PNG imagesの使い方を解説
今日は下記の順序で解説して行きますので、一緒に設定していきましょう！
|
1.Compress JPEG & PNG imagesの準備方法 2.Compress JPEG & PNG imagesの圧縮設定 3.Compress JPEG & PNG imagesの一括圧縮方法 |
１．Compress JPEG & PNG imagesの準備(インストールしアカウントを取得する)
まず、ワードプレスでCompress JPEG & PNG imagesを利用するために必要な準備は、こちらの2つです。
|
以上の2つは、一度設定するだけで使い続けられるので、ササッと準備を済ませましょう。
Compress JPEG & PNG images をインストールする
Compress JPEG & PNG imagesをインストールする手順は、こちらの4つのステップです。
|
では、ワードプレスにプラグイン「Compress JPEG & PNG images」をインストールする手順を見ていきましょう。
このような手順で「Compress JPEG & PNG images」をインストールすると、インストール済みプラグインの一覧に追加されます。
インストールの手順を実際に行った動画はこちらになりますので、よければ参考にされてください。
Compress JPEG & PNG imagesのアカウントを取得する
Compress JPEG & PNG imagesのアカウント取得は公式サイトからも行えますが、ワードプレスの設定画面から行うことも可能です。
ワードプレスから操作する場合は、「インストール済みプラグイン」の一覧から移動しましょう。
|
では、詳しく解説していきます。
入力されている場合はそのまま保存を押しましょう。
このような手順で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のインストールからアカウント取得までの操作方法です。
ちなみにですが、同様の手順についてはこちらの動画で分かりやすく解説していますので、よければ参考にされてください。
２． Compress JPEG & PNG images の新規画像の圧縮設定(好みに合わせて選択する)
Compress JPEG & PNG imagesはアップロード済み画像の選択・一括の圧縮だけでなく、新規アップロード画像の自動圧縮にも対応しています。
そのため、事前にワードプレスのメニューの設定「Compress JPEG & PNG images」から、新規アップロード画像の圧縮設定を行っておきましょう。
ちなみにですが、新規画像への圧縮設定は、こちらの3項目があります。
|
Compress JPEG & PNG imagesの設定は英語で記載されている部分が多いので、迷ってしまうかもしれません。
ササッとオプション設定を済ませてCompress JPEG & PNG imagesを使いたい方は、こちらの設定にすることがおすすめです。
|
オススメの設定
※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項目の設定は、こちらの動画で詳しく解説していますのでよければ参考にされてください。
３．アップロード済み画像を一括圧縮する
(Bulk OptimizationでStart Bulk Optimizationを押す)
ワードプレスにCompress JPEG & PNG imagesを設定すると、メディアライブラリの画像を一括圧縮することができるようになります。
そして、アップロード済みの画像を一括圧縮する手順は次の3つです。
|
では、画像を一括圧縮する手順について見ていきましょう。
このような手順で行うと、無料の範囲でできるところまでが圧縮されます。
そのため、圧縮されたデータの一覧を見ると、圧縮枚数を超えた分は失敗を意味する「✖」の表示があります。
無課金でたくさんの画像を圧縮したい時は、「課金の回避方法」を参考にされてください。
そして、アップロード済み画像一括で圧縮する方法についてはこちらの動画で実際の操作を紹介しています。
課金の回避方法
月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を変えると言う荒業はなるべく止めておきましょう！
４．圧縮したい画像を指定して個別に圧縮する(メディアから選択する)
Compress JPEG & PNG imagesを利用して画像を指定しながら圧縮する時は、次の手順で操作を行います。
|
このように直接選ぶことが出来るので、画像の大きなものだけを選びたい時などに活用しましょう。
では、画像を一つずつ選択しながら圧縮していく方法についてみていきましょう。
このように、「Compress」ボタンを押すだけで圧縮が行えます。
クルクルと回っているマークが消えると、画像の圧縮が完了した状態です。
画像容量の気になる画像のみを圧縮したい時は、メディアから直接圧縮を行いましょう。
実際にCompress JPEG & PNG imagesを利用して、ひとつずつ画像を圧縮している動画はこちらになります。
Compress JPEG & PNG images の使い方についてのまとめ
ワードプレスの画像を簡単に圧縮できるCompress JPEG & PNG imagesは、
|
と、過去の画像も未来で使用する画像も圧縮することができます。
無料で利用できる範囲は月500枚までですが、個人的な仕様であれば十分足りる程度の圧縮が可能です。
手軽に利用できるので、気になる画像を軽量化しましょう。