【画像圧縮プラグイン】Compress JPEG & PNG imagesの設定と使い方
※本ページにはプロモーションが含まれている場合があります。
・Compress JPEG & PNG imagesの特徴や使い方を知りたい！
・他のツールとの違いを知りたい！
・画像を綺麗にとことん圧縮したい！
・サイトスピードを速くしたい！
本記事の内容
- Compress JPEG & PNG imagesの特徴やメリット
- インストールと設定方法
- 使い方
- 他の圧縮ツールとの比較
- 無料の枚数を超えた場合にさらに圧縮する方法
本記事を読むと、Compress JPEG & PNG imagesの具体的な使い方だけでなく他の画像圧縮ツールより優れている点や無料でお得に使う方法までわかります。
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
＼ 月間1300万PVのプロが解説 ／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！
目次
Compress JPEG & PNG imagesの特徴
Compress JPEG & PNG imagesは、画像を圧縮してサイズを小さくしてくれるサイトであるTinyPNGのWordPressプラグインです。
無料で簡単に画像を圧縮してくれて、画像が軽くなることでページの表示速度を速くしてくれる効果があります。
Compress JPEG & PNG imagesでできること
Compress JPEG & PNG imagesの機能は大きく以下の2つになります。
- 機能①WordPressに画像をアップロードする度に自動で圧縮してくれる
- 機能②既にアップロード済みの画像を一括で(もしくは個別でも)圧縮できる
画像を圧縮せずに使っているとページの表示速度が遅くなりユーザーの離脱に繋がります。
ユーザーが離脱するとSEOで悪い評価を受けて検索順位がどんどん下がります。
つまり、Compress JPEG & PNG imagesで画像を軽くしてページの表示速度を上げておくだけで、ユーザーに読まれやすくなりSEOでも良い評価があります。
Compress JPEG & PNG imagesのメリット
画像を圧縮してくれるサービスは他にもありますが、Compress JPEG & PNG imagesのメリットは大きく5つあります。
- 無料で十分使える
- 操作が簡単
- 自動で毎回勝手に圧縮してくれる
- 圧縮後の画像がとても綺麗
- 驚きの圧縮率
と多少の手間がかかるのに対し、
Compress JPEG & PNG imagesはWordPressに画像をアップロードする度に自動で圧縮してくれるのでブロガーにとっては大変嬉しいプラグインであると言えます。
何記事も書いて何枚も画像を使っているとこの差がかなり大きくなります。
メリットの中で特に驚きなのが、画像サイズの圧縮率と圧縮後の画像の綺麗さです。
圧縮率の比較の見出しで詳しく紹介しますが、画像によっては-90%も圧縮される上にその見た目はほぼ圧縮されたことがわからないほど綺麗な仕上がりになります。
他の圧縮ツールにはできない大きなメリットです。
①TinyPNGのアカウント登録とAPIの取得
ここからはCompress JPEG & PNG imagesの具体的な使い方を解説します。
まずはTinyPNGのアカウント登録をして、APIを取得します。
以下の手順で進めます。
- 手順①：TinyPNGのDeveloper APIにアクセスする
- 手順②：名前とアドレスを入力して登録する
- 手順③：メールを開いてダッシュボードを開く
- 手順④：API KEYをコピーする
手順①：TinyPNGのDeveloper APIにアクセスする
まずは、登録ページであるTinyPNGのDeveloper APIにアクセスします。
>> Developer API – TinyPNG
アクセスすると上記の画像のようなページが表示されます。
手順②：名前とアドレスを入力して登録する
上記の画像を参考に、フルネームとメールアドレスを入力し、「Get Your API Key」をクリックして登録を完了します。
上記の画像の画面になれば完了です。
手順③：メールを開いてダッシュボードを開く
手順②で入力したメールアドレス宛に、「Tinify」からメールが届いているので開きます。
メールは上の画像のようになっているので、「Visit your dashboard」をクリックして自分のダッシュボードにアクセスします。
手順④：API KEYをコピーする
API Dashboardという上記の画面が表示されます。
画像の赤枠の箇所にAPI KEYが表示されているのでコピーしてください。
これでアカウントの登録とAPIの取得は完了です。
②Compress JPEG & PNG imagesのインストール
続いて、WordPressにプラグイン「Compress JPEG & PNG images」をインストールして、先ほどのAPIを入力してアカウントを連携させます。
具体的には以下の手順で進めます。
- 手順①：「Compress JPEG & PNG images」をインストールして有効化する
- 手順②：「設定」の「Compress JPEG & PNG images」からAPI Keyを入力する
手順①：「Compress JPEG & PNG images」をインストールして有効化する
まずはWordPressの管理画面を開き、「プラグイン」→「新規追加」のページを開きます。
検索窓で「Compress JPEG & PNG images」を検索し、上記の画像のパンダの画像のプラグインの「インストール」ボタンをクリックしてインストールします。
「有効化」をクリックしてプラグインを有効化します。
手順②：「設定」の「Compress JPEG & PNG images」からAPI Keyを入力する
続いて、有効化したCompress JPEG & PNG imagesに、APIを入力してTinyPNGのアカウントと連携させます。
WordPressの管理画面の「設定」から「Compress JPEG & PNG images」をクリックして、Compress JPEG & PNG imagesの設定画面を開きます。
上記の画像のような「Tinify account」という項目があるので、先ほど「API KEYをコピーする」の手順で取得したAPI Keyを入力して「保存」をクリックします。
Tinify accountの項目の表示が上記の画像のように変わったら連携が完了です。
③Compress JPEG & PNG imagesの各種設定
次に、Compress JPEG & PNG imagesの各種設定をしていきます。
以下の4つを設定します。
- 設定①Tinify account
- 設定②New image uploads
- 設定③Image sizes
- 設定④Original image
それぞれ順番に解説します。
設定①Tinify account
Tinify accountの項目では、特別設定することはありませんがアカウントの情報を確認できます。
API Keyを入力して無事アカウントの連携ができていれば上記の画像のように「Your account is connected」の文字が表示されます。
Compress JPEG & PNG imagesは無料で使えるのは月間500枚までという制限がありますが、残りの枚数もこの欄に表示されています。
設定②New image uploads
続いてNew image uploadsについてです。
これは、WordPressに画像をアップロードした際にどのように圧縮をするかの設定で、3パターンがあります。
Compress new images in the background (Recommended)
これを選択すると、画像がアップロードされたら他の作業を進めている間にもその作業の裏(バックグラウンド)で圧縮を進めるという設定です。
他の画像系のプラグインとの関係で問題が起こる可能性もなくはないですが、基本的にはこの設定がおすすめです。
裏で画像を圧縮してくれるので、画像のアップロードが素早くできます。
Compress new images during upload
これを選択すると、画像をアップロードしている間に圧縮を行います。
先の設定に比べると画像のアップロードに時間がかかりますが、他の画像系プラグインとの問題が起こりにくい設定になります。
Do not compress new images automatically
これを選択すると、画像をアップロードしても自動で圧縮しない設定になります。
この場合は、後ほど解説する手動の方法でアップロード済みの画像を圧縮する必要があります。
設定③Image sizes
3つ目の設定はImage sizesです。
これは、圧縮する対象となる画像のサイズの設定になります。
Compress JPEG & PNG imagesの注意点のところで詳しく解説しますが、WordPressでは画像を1枚アップロードしただけでもサムネイルや中サイズなどの複数の画像へと自動的に変換されます。
つまり1枚アップロードしただけで自動的に複数枚の画像がWordPressに保存されることになります。
Image sizesの設定では、その複数のサイズの画像のうちどのサイズを圧縮の対象として含めるかを選択できます。
Compress JPEG & PNG imagesは無料で使えるのは月間500枚までという制限があるので、無駄に無料の枚数を使ってしまわないように余分なサイズは圧縮の対象から外しておきましょう。
画像サイズが大きい「Original Image」や「Large」サイズを圧縮するのがおすすめです。
設定④Original image
最後に、Original imageの項目です。
この項目ではアップロードしたオリジナルの画像への処理を設定でき、4つの項目があります。
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(位置情報)もそのまま保存されます。(JPEG画像のみ)
設定の保存も忘れずに！
これまでの各種設定を行ったら、画面最下部にある「変更を保存」のボタンを押して忘れずに設定を保存しましょう。
ここまででCompress JPEG & PNG imagesを使うための準備は全て完了です。
あとは画像をアップロードするだけで、設定に応じて自動的に画像が圧縮されます。
記事に入れる画像を用意する度に毎回手動で圧縮をしなくても、アップロードするだけで勝手に圧縮してくれるので非常に便利です。
使い方：過去にアップロード済みの画像の圧縮
Compress JPEG & PNG imagesはWordPressに画像をアップロードするだけで自動で圧縮をしてくれますが、既にアップロード済みの画像を手動で圧縮する方法も解説します。
手動で圧縮する方法には以下の2つがあります。
- 一括で圧縮する方法
- 個別で圧縮する方法
それぞれ順に解説します。
一括で圧縮する方法
WordPressの管理画面から「メディア」→「Bulk Optimization」をクリックします。
上記の画像のような画面が表示されます。
画像の赤枠の箇所の3つの数値はそれぞれ以下のものを表しています。
| UPLOADED IMAGES | アップロード済みの画像の枚数 |
|---|---|
| UNCOMPRESSED IMAGE SIZES | 圧縮されていない画像の枚数 (アップロードされた画像それぞれに複数のサイズの画像が保存されているので、アップロード数よりも多くなる可能性あり) |
| ESTIMATED COST | 無料の制限(月間500枚)を超える場合に発生する費用 |
500枚を超える場合は有料になりますが、クレジットカードを登録しないと有料分は使えないので、「気づかないうちに費用が発生していた」ということにはならないのでご安心ください。
「Start Bulk Optimization」をクリックするとアップロード済みの画像の一括での圧縮処理が開始されます。
完了すると上の画像のように青色のゲージが満タンになり、「Total Savings」の欄に元の画像のサイズと圧縮後の画像サイズ、圧縮率などが表示されます。
上記の画像の場合は、57.85MBだった410枚の画像が19.5MBまで70.6%も圧縮されたということになります。
驚きの圧縮率です。
個別で圧縮する方法
続いて、アップロード済みの画像を個別で選択して圧縮する方法を解説します。
WordPressの管理画面から「メディア」→「ライブラリ」を開きます。
上の画像のボタンをクリックして、ライブラリの表示をリスト表示に切り替えます。
「Compression」という欄が表示されているので、圧縮したい画像の行の「Compression」ボタンをクリックすると圧縮が始まります。
既に圧縮済みの場合や、圧縮が完了した場合は上の画像のような表示になっています。圧縮されたサイズのパーセンテージなどが表示されています。
「Details」をクリックすると、その画像の詳細な圧縮データを見ることができます。
気になる画像の圧縮率を比較！
ということですが実際どれくらい圧縮率がすごいのか気になるところですよね。
そこで、Compress JPEG & PNG imagesと並んで有名なEWWW Image Optimizerと圧縮率を比較してみました。
圧縮率を比較①
| Compress JPEG & PNG images | EWWW Image Optimizer | ||||
|---|---|---|---|---|---|
| 画像サイズ | 元サイズ | 圧縮後 | 圧縮率 | 圧縮後 | 圧縮率 |
| オリジナルサイズ | 2.0 MB | 232.2 KB | -88.4% | 1.7 MB | -15% |
| 1536×1536 | 204.4 KB | 130.1 KB | -36.4% | 176.7 KB | -13.6% |
| Large | 104.0 KB | 73.1 KB | -29.7% | 90.4 KB | -13.1% |
| Medium_large | 64.7 KB | 49.5 KB | -23.5% | 56.2 KB | -13.1% |
| Medium | 15.1 KB | 15.1 KB | -0% | 13.0 KB | -13.9% |
| Thumbnail | 7.3 KB | 7.3 KB | -0% | 6.3 KB | -13.7% |
Compress JPEG & PNG imagesでは特に、「オリジナルサイズ」や「1536×1536」、「Large」などの大きなサイズの圧縮率が目立ち、オリジナルサイズでは驚きの-88.4%の圧縮率となっております。
2.0MBだった画像が1.7MB以上も圧縮されています。
「Medium」や「Thumbnail」のサイズは-0%となっていますが、メインで圧縮したいのはオリジナル~Largeのサイズなので、十分だと言えます。
上の表で比較した画像は上記の画像になり、Compress JPEG & PNG imagesで圧縮した後の画像になります。
圧縮後の画像ですが、とても綺麗に圧縮されており画質の劣化が全くわかりません。
圧縮率を比較②
2枚目の比較の結果は以下のようになっています。
| Compress JPEG & PNG images | EWWW Image Optimizer | ||||
|---|---|---|---|---|---|
| 画像サイズ | 元サイズ | 圧縮後 | 圧縮率 | 圧縮後 | 圧縮率 |
| オリジナルサイズ | 1.5 MB | 275.4 KB | -81.6% | 1.3 MB | -13.3% |
| 1536×1536 | 194.4 KB | 185.5 KB | -4.6% | 170.9 KB | -12.1% |
| Large | 98.1 KB | 93.1 KB> | -5.1% | 85.6 KB | -12.7% |
| Medium_large | 59.0 KB | 55.9 KB | -5.3% | 51.3 KB | -13.1% |
| Medium | 10.8 KB | 10.5 KB | -2.8% | 9.3 KB | -13.9% |
| Thumbnail | 5.0 KB | 4.7 KB | -6% | 4.2 KB | -16% |
「1536×1536」以下のサイズはCompress JPEG & PNG imagesでもほどほどの圧縮率ですが、やはり「オリジナルサイズ」の大きなサイズの画像の圧縮率が-81.6%と異常な圧縮率を誇っています。
比較したEWWW Image Optimizerは-13.3%なので、差は歴然です。
この比較で使用した画像はこちらになり、Compress JPEG & PNG imagesで圧縮した後の画像になります。
こちらも全く劣化が見られずとても綺麗な画像です。
今回比較したEWWW Image Optimizerについては以下の記事で詳しく解説しています。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
Compress JPEG & PNG imagesの注意点！
WordPressでは1枚の画像をアップロードしただけでも、その画像のサムネイル用のサイズの画像・Largeサイズ用の画像・など複数の画像が作成されて保存されています。
つまり1枚の画像をアップロードしただけでも、圧縮される画像は複数枚あります。
5サイズある場合はこれだけで5枚のカウントとして計算されるので、全てのサイズを圧縮しているとあっという間に月間500枚の制限に到達してしまいます。
アップロード画像1枚あたり5サイズある場合は、アップロード画像100枚で500枚に達してしまうので、1日あたり3枚ほどしかアップロードできません。
こうならないために、設定③のImage sizesで解説したように圧縮対象とするサイズをあらかじめ指定して、不要なサイズは圧縮しない設定にしておきましょう。
Compress JPEG & PNG imagesの無料上限数を超えた時の裏技
画像をたくさん使われる方は、それでも月間500枚の上限数に達してしまうこともあると思います。
その時に無料で画像を圧縮するための裏技をご紹介します。
Compress JPEG & PNG imagesの有料の料金
月間500枚までの圧縮の制限数を超えると、超えた分は枚数に応じて料金が発生します。
※有料の分まで利用するにはあらかじめクレジットカードを登録する必要があるので、「気がつかないうちに勝手に料金が発生していた」ということはありません。
有料の場合は以下のような料金がかかります。
| 月間500枚まで | 無料 |
|---|---|
| 501枚目から10,000枚まで | 画像1枚あたり0.009ドル |
| 10,001枚目以降 | 画像1枚あたり0.009ドル0.002ドル |
有料といってもとてもお得な金額ですが、次にご紹介する方法を使えば500枚を超えても無料で画像を圧縮することができます。
無料で画像を圧縮する裏技
月間500枚の圧縮を使い切ったあとは、TinyPNGを使って圧縮するのがおすすめです。
TinyPNGはCompress JPEG & PNG imagesとは違ってWordPressのプラグインではないので、TinyPNGにアクセスして手動で画像を圧縮する必要があります。
ただし、
- Compress JPEG & PNG imagesと同じで圧倒的な圧縮率と仕上がりの綺麗さ
- ドラッグ&ドロップですぐに圧縮できる
- 数秒で完了
- 登録不要
- 一括で20枚まで、1枚あたり5MBまで無料
というとても便利で高性能なサイトです。
全てをTinyPNGで圧縮していると時間がかかりますが、月間500枚を超えてしまった場合はTinyPNGを一時的に利用することで無料に抑えることができます。
TinyPNGの使い方や特徴は以下の記事で詳しく解説しています。
>> 【超簡単】画像を圧縮して軽量化！TinyPNGの使い方【無料】
Compress JPEG & PNG imagesで自動で画像を圧縮しよう！
非常に高性能な画像圧縮サイトであるTinyPNGのプラグイン「Compress JPEG & PNG images」の特徴と使い方をご紹介しました。
たかが画像と言えど、枚数が多くなるとページの表示速度はどんどん遅くなっていきます。
SEO目線でも、ページの表示速度は検索順位に大きく影響するので、導入がまだの方は早速Compress JPEG & PNG imagesを導入しておきましょう。
TinyPNGの使い方については以下の記事でも解説しているので合わせてご覧ください。
>> 【超簡単】画像を圧縮して軽量化！TinyPNGの使い方【無料】
TinyPNGの姉妹サイトであるTinyJPGについては以下の記事で解説しています。
>> 【画像圧縮】TinyJPGの使い方を画像付きで解説！PNGの圧縮もできる！
公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。
LINE参加者の声
400名が以上参加中！無料で読めます♪
＼ 最短で収益化 ／
