漫画・小説・ビジネス書なんでも最大100冊分が半額

Compress JPEG&PNG imagesの使い方と設定【画像圧縮】

Compress JPEG & PNG images設定
Compress JPEG & PNG imagesとは?

TinyPNGの使い方

パンダがトレードマークでお馴染みの「tinypng」のプラグイン版(画像ファイルを圧縮してくれる)。

(無料で圧縮できるのは月に500枚まで、それ以降は有料)

画像圧縮では「EWWW Image Optimizer」が有名ですが、両方試した結果このプラグインの方が圧縮率も高くおすすめです。

ということで、Compress JPEG & PNG imagesの設定や機能について解説していきます。

プラグインのまとめ記事はこちら

WordPressプラグインWordPressのおすすめプラグインをまとめたページ【随時更新】

Compress JPEG & PNG images使い方①【インストール方法】

compress-jpeg-&-png-imagesインストール方法

管理画面

プラグイン

新規追加

Compress JPEG & PNG images」で検索

インストール

有効化

Compress JPEG & PNG images使い方②【APIキーの取得】

このプラグインの設定は、管理画面の「設定」項目には表示されず「設定内のメディア」の中で設定します。

jpeg-and-png-optimizationアカウント登録

管理画面

設定

メディア

新規アカウントの登録

名前とメールアドレスを入力

Register Account」をクリックで以下の画面を確認

tinypngアカウント登録メール送信

先ほど登録したメールアドレスに下記のメールが届きます。

tinypngアカウント確認メール

Activate your account」をクリック

tinypngプラグイン起動

この画面を閉じてWordPressの管理画面に戻れば、プラグインが使えるようになっています。

2-1・APIキーの確認方法

一度取得したAPIキーは、他のサイトでも共有できます。

tinypng-APIキー確認方法

Change API key」をクリック

tinypngのAPIキー

このキーを使えば、別サイトでも使用できます。

ただし、枚数制限なども引き継ぐので画像を多用するサイトであれば、別のメールアドレスで新たにAPIキーを入手した方が良いです。

Compress JPEG & PNG images使い方③【JPEG and PNG optimizationの設定】

ここで、現在の使用枚数の確認や圧縮する画像の対象を決めていきます。

3-1・TinyPNG account

ここで、今月圧縮した枚数を確認できます。(上記サンプル画像の134の部分)

3-2・File compression

ここで圧縮する画像を選択していきます。

3-2-1・Original image

これはアップした画像すべてなので、チェックします。

3-2-2・その他の画像

ここでその他にしたのは、使ってるテーマにより表示が変わるからです。(トップページの画像サイズを変更できるテーマをお使いの場合は、設定している画像サイズが表示されます。)

例えば、当サイトは「WordPressテーマ「ストーク」 」を使用していて、現在はこのように表示されています。

補足

現在は「SANGO」を使用

  • 「Home-thum – 486×290」
  • 「Post-thum – 300×200」

WordPressテーマ「ストーク」 」の場合はトップページの表示を

  • 「シングル」
  • 「カード」
  • 「マガジン」
  • 「ビッグ」

の4種類から選べるので「Home-thum – 486×290」は、「シングル」のサイズになります。

Post-thum – 300×200」も、「WordPressテーマ「ストーク」 」の専用画像サイズで、それぞれ記事下の「関連記事」と「最新記事」のサイズです。

ストーク関連記事サンプル

at least 166 images」の部分は、毎回3つのサイズを圧縮すると166枚しか圧縮できませんよという意味です。

2つなら「250」、1つなら「500」と表示されます。

Compress JPEG & PNG images使い方④【Original image設定】

この先の項目は、先ほどの「File compression」で「Original image」にチェックを入れると表示されます。

基本は全て、ノーチェックで構いませんがサラッと説明だけしておきます。

4-1・Resize and compress the orginal image

チェックをして、「幅」と「高さ」を指定した場合、そのサイズを超える画像をアップロードすると画像圧縮と同時にリサイズも行ってくれます。

指定したサイズを超えなければ、画像圧縮のみされます。

ただし、リサイズの数も月の枚数制限にカウントされる(1度のアップロードで2回消費する)ため、当サイトでは使用していません。

4-2・Preserve creation date and time

ここをチェックすると、「JPEG」形式の画像のみ、アップロードした「作成日時」を保存できます。

4-3・Preserve copyright information

ここをチェックすると、画像内に「著作権」情報を保存できます。

4-4・Preserve GPS location

ここにチェックすると、「JPEG」形式の画像のみGPSによる「位置情報」を保存できます。

設定をしたら、最後に「変更を保存」をしてください。

Compress JPEG & PNG imagesの圧縮率を測定

それでは、このプラグインによる圧縮率を見てみましょう。

今回は「JPEG」と「PNG」を比べてみます。

「JPEG」

compress-jpeg-&-png-images-jpegの圧縮率

当サイトでは、記事内で使う画像は「jpeg」を使用していますが、「Home-thum(トップページ)」や「Post-thum(関連記事など)」は関係ないので、「Original」のみ圧縮しています。

圧縮前の画像の容量は「239.9KB」に対し、圧縮後は「44.7KB」になりました。

トータルで「70%」圧縮されています。

PNG

compress-jpeg-&-png-images-PNGの圧縮率

PNG」は、アイキャッチ画像に使っているので全て圧縮しています。

こちらも全体で69%圧縮されています。

これだけ圧縮されていれば十分ですね。

ちなみに、1KB減らすことがどれくらいかというと……

  • 1KB(キロバイト)=1024B(バイト)
  • 1文字=半角1B、全角2B、改行2B
  • 1024÷2=512文字(全角)

この数値からもわかるようにたった1KBでも、500文字分の容量なんですね。

WEB上には、記事を最後まで読んでもらうために画像を適度に挟んだ方が良いという意見もありますが(そういったサイトは大抵謎の海外画像を多用してる)上記のことからも無駄な画像は極力避けるべきです。

それに、そんなことのために画像探すってのも面倒ですしね。

Compress JPEG&PNG images【まとめ】

このプラグインの特徴
  • 画像をアップロードすれば、自動圧縮を行ってくれる
  • 圧縮する画像を個別に選択できる
  • 設定が楽
  • 圧縮量が高め

500枚制限があるとはいえ、もし超えるようなら本家の「TinyPNG」を使えばいいだけなので、基本無料で使えますね。

画像の圧縮は、ページの表示速度が早くなる=サイトの高速化に繋がります。

サイトの高速化はユーザーにも、検索エンジンにも喜ばれるので早めに設定しておきましょう。

WordPressプラグインWordPressのおすすめプラグインをまとめたページ【随時更新】

コメントを残す

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