パンダがトレードマークでお馴染みの「tinypng」のプラグイン版（画像ファイルを圧縮してくれる）。
（無料で圧縮できるのは月に５００枚まで、それ以降は有料）
画像圧縮では「EWWW Image Optimizer」が有名ですが、両方試した結果このプラグインの方が圧縮率も高くおすすめです。
ということで、Compress JPEG & PNG imagesの設定や機能について解説していきます。
記事の目次
Compress JPEG & PNG images使い方①【インストール方法】
「管理画面」
↓
「プラグイン」
↓
「新規追加」
↓
「Compress JPEG & PNG images」で検索
↓
「インストール」
↓
「有効化」
Compress JPEG & PNG images使い方②【APIキーの取得】
このプラグインの設定は、管理画面の「設定」項目には表示されず「設定内のメディア」の中で設定します。
「管理画面」
↓
「設定」
↓
「メディア」
↓
「新規アカウントの登録」
↓
「名前とメールアドレスを入力」
↓
「Register Account」をクリックで以下の画面を確認
↓
先ほど登録したメールアドレスに下記のメールが届きます。
「Activate your account」をクリック
↓
この画面を閉じてWordPressの管理画面に戻れば、プラグインが使えるようになっています。
２-１・APIキーの確認方法
一度取得したAPIキーは、他のサイトでも共有できます。
「Change API key」をクリック
↓
このキーを使えば、別サイトでも使用できます。
ただし、枚数制限なども引き継ぐので画像を多用するサイトであれば、別のメールアドレスで新たにAPIキーを入手した方が良いです。
Compress JPEG & PNG images使い方③【JPEG and PNG optimizationの設定】
ここで、現在の使用枚数の確認や圧縮する画像の対象を決めていきます。
３-１・TinyPNG account
ここで、今月圧縮した枚数を確認できます。（上記サンプル画像の１３４の部分）
３-２・File compression
ここで圧縮する画像を選択していきます。
３-２-１・Original image
これはアップした画像すべてなので、チェックします。
３-２-２・その他の画像
ここでその他にしたのは、使ってるテーマにより表示が変わるからです。（トップページの画像サイズを変更できるテーマをお使いの場合は、設定している画像サイズが表示されます。）
例えば、当サイトは「WordPressテーマ「ストーク」 
」を使用していて、現在はこのように表示されています。
現在は「SANGO」を使用
- 「Home-thum – 486×290」
- 「Post-thum – 300×200」
「WordPressテーマ「ストーク」 」の場合はトップページの表示を
- 「シングル」
- 「カード」
- 「マガジン」
- 「ビッグ」
の４種類から選べるので「Home-thum – 486×290」は、「シングル」のサイズになります。
「Post-thum – 300×200」も、「WordPressテーマ「ストーク」 」の専用画像サイズで、それぞれ記事下の「関連記事」と「最新記事」のサイズです。
「at least 166 images」の部分は、毎回３つのサイズを圧縮すると１６６枚しか圧縮できませんよという意味です。
２つなら「２５０」、１つなら「５００」と表示されます。
Compress JPEG & PNG images使い方④【Original image設定】
この先の項目は、先ほどの「File compression」で「Original image」にチェックを入れると表示されます。
基本は全て、ノーチェックで構いませんがサラッと説明だけしておきます。
４-１・Resize and compress the orginal image
チェックをして、「幅」と「高さ」を指定した場合、そのサイズを超える画像をアップロードすると画像圧縮と同時にリサイズも行ってくれます。
指定したサイズを超えなければ、画像圧縮のみされます。
ただし、リサイズの数も月の枚数制限にカウントされる（１度のアップロードで２回消費する）ため、当サイトでは使用していません。
４-２・Preserve creation date and time
ここをチェックすると、「JPEG」形式の画像のみ、アップロードした「作成日時」を保存できます。
４-３・Preserve copyright information
ここをチェックすると、画像内に「著作権」情報を保存できます。
４-４・Preserve GPS location
ここにチェックすると、「JPEG」形式の画像のみGPSによる「位置情報」を保存できます。
設定をしたら、最後に「変更を保存」をしてください。
Compress JPEG & PNG imagesの圧縮率を測定
それでは、このプラグインによる圧縮率を見てみましょう。
今回は「JPEG」と「PNG」を比べてみます。
「JPEG」
当サイトでは、記事内で使う画像は「jpeg」を使用していますが、「Home-thum（トップページ）」や「Post-thum（関連記事など）」は関係ないので、「Original」のみ圧縮しています。
圧縮前の画像の容量は「２３９.９KB」に対し、圧縮後は「４４.７KB」になりました。
トータルで「７０％」圧縮されています。
「PNG」
「PNG」は、アイキャッチ画像に使っているので全て圧縮しています。
こちらも全体で６９％圧縮されています。
これだけ圧縮されていれば十分ですね。
ちなみに、１KB減らすことがどれくらいかというと・・・
- １KB（キロバイト）＝１０２４B（バイト）
- １文字＝半角１B、全角２B、改行２B
- １０２４÷２＝５１２文字（全角）
この数値からもわかるようにたった１KBでも、５００文字分の容量なんですね。
WEB上には、記事を最後まで読んでもらうために画像を適度に挟んだ方が良いという意見もありますが（そういったサイトは大抵謎の海外画像を多用してる）上記のことからも無駄な画像は極力避けるべきです。
それに、そんなことのために画像探すってのも面倒ですしね。
まとめ
- 画像をアップロードすれば、自動圧縮を行ってくれる
- 圧縮する画像を個別に選択できる
- 設定が楽
- 圧縮量が高め
５００枚制限があるとはいえ、もし超えるようなら本家の「TinyPNG」を使えばいいだけなので、基本無料で使えますね。
画像の圧縮は、ページの表示速度が早くなる＝サイトの高速化に繋がります。
サイトの高速化はユーザーにも、検索エンジンにも喜ばれることなので早めに設定しておきましょう。
画像関連の記事はこちら
チャージ額に応じてポイントが貯まります。
「プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!
※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください
STEP1
STEP2
エントリー完了後、「Amazonギフト券チャージタイプ」をクリック
STEP3
キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力後次へをクリック
STEP4
「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック
STEP5
特に何もせず注文を確定するをクリック
以下キャンペーン条件から外れてしまうトラップについて。
- 支払い方法の「電子マネー」はNG
- Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
- 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG
私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX（導線）でよろしくないなと思いました。
STEP6
Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。「お支払い方法別の手順」のリンクをクリックしてください。
STEP7
もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。
それ以外の支払い方法をクリックすると詳細が載っているので、期限である６日以内に支払いを済ませて完了です。
以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。
※チャージした金額の有効期限は安心の10年間
ご質問・ご感想・受付中