WordPressカスタマイズまとめ←クリック

Compress JPEG & PNG imagesの使い方と設定【画像圧縮プラグイン】

Compress JPEG & PNG images設定

Compress JPEG & PNG imagesとは?

TinyPNGの使い方

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

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

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

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

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

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

まとめ

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

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

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

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

画像関連の記事はこちら

沈黙のWebライティングSEOのためのライティング教本
★Amazonは現金チャージがお得★

チャージ額に応じてポイントが貯まります。

プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

キャンペーンページへ

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック


STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX(導線)でよろしくないなと思いました。


STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。お支払い方法別の手順」のリンクをクリックしてください。


STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である6日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

プライム会員」なら最大2.5%ポイント還元!!

※チャージした金額の有効期限は安心の10年間

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。