【プラグイン】画像圧縮ツール「TinyPNG」の使い方と設定方法

悩める人

画像データの容量を少しでも減らしたいのですが、何かおすすめの画像圧縮ツールはありませんでしょうか？

このような悩みにお答えします！

サーバーを運営(ブログを書く)する上で、通常最も容量を食うのは、主に画像データです。(場合によっては動画のケースも)

例えばアイキャッチに使う画像の推奨サイズは、横1200 X 縦630 ピクセル(比率: 1:1.191)ですが、高画質の場合 1MB を超える場合もあります。今回紹介する「TinyPNG」画像圧縮ツールを用いると、なんと！60〜70%ほど圧縮することが可能です。

画像の容量が大きいとそれだけサーバーからのレスポンスが落ち、結果としてユーザービリティが下がります。するとSEOにも影響を与える事にもなりかねません。

無料で使えるツールなので、早速導入してしまいましょう！

本記事の内容

「TinyPNG」について
「TinyPNG」の使い方(PCブラウザ版)
「TinyPNG」のインストール方法(プラグイン版)
「TinyPNG」の設定方法

1 「TinyPNG」について
2 「TinyPNG」の使い方(PCブラウザ版)
3 「TinyPNG」を利用する前の画像と圧縮後の画像を比較検証
4 TinyPNG – JPEG, PNG & WebP image compression(プラグイン版)について
5 TinyPNG – JPEG, PNG & WebP image compression の利用条件と制限
6 TinyPNG – JPEG, PNG & WebP image compression の導入方法(インストール)
7 TinyPNG – JPEG, PNG & WebP image compression の設定方法(オプション)
8 過去にアップロードした画像を圧縮する方法
- 8.1 ① 一括圧縮
- 8.2 ② 個々圧縮
9 意地でも無料で使う方法(裏技？)
10 まとめ: TinyPNG は高圧縮率の画像容量削減法。プラグイン版で手間いらず！

「TinyPNG」について

「TinyPNG」は WebP, PNG, JPEG などの画像ファイルを圧縮させることが出来る無料ソフトウェア(ツール)です。

こちらのツールは、下記のように2通りの使用環境が設けられており、制限を除けばどちらも無料で使えるツールです。特にブラウザ版は完全無料。そして圧縮率や機能的なものはどちらも一緒。

後ほど順を追って両方とも解説します。

ブラウザ版(PC)
プラグイン版(WordPress)

「TinyPNG」の特徴としては、次の通りです。

TinyPNGの特徴

画像サイズによっては60%以上の圧縮率を誇る
画像圧縮前後での画質の劣化がほとんど見られない
他の画像圧縮ツールに比べても圧縮率が高く高性能

メリットしかないように見えます。

実は、どちらとも使用制限が設けられていますが、過度な使い方をしなければ十分満足して使えるツールです。使用制限については、また後ほど解説します。

ページの読み込みやレスポンスが悪いほど、ユーザーの離脱率は上がり、Google からはマイナス評価として受け止められてしまいます。とにかく、画像サイズを圧縮させて表示速度を少しでも上げることがブロガーにとっての一つのSEO対策となります。

「TinyPNG」の使い方(PCブラウザ版)

① 「TinyPNG(公式サイト)」へアクセス

② 「Drop your images here!」と書いてある箇所に、手持ちの画像ファイルを ドラッグ & ドロップ する(or クリックしてファイルを選択も可)

③ ドラッグ & ドロップ すると、画像圧縮処理が始まり、終了すると次のような画面に切り替わります。

結果として元の画像が68%圧縮され、軽量化されました。

④ 保存する

個別にダウンロード
まとめてダウンロード(zipファイル)
Dropbox にダウンロード

保存方法は上の3つから選択することができます。

なお、今回は1枚のファイルで圧縮をかけましたが、複数ファイル(一度に20枚まで可能)をドラッグ & ドロップすることができます。

複数ファイルを一括して保存したい場合は、②の方法で「Download all Images」をクリックすることで zip ファイルとして保存することができます。

⑤ 利用上の制限

対応ファイル形式: WebP, PNG, JPEG
圧縮可能枚数: 一度に20枚まで
最大ファイル容量: 5MBまで(1枚につき)

このような制限があります。おそらくサーバーへの負担を軽減させるための処置でしょう。

しかし「一度に20枚まで」という制約はありますが、一回の作業ごとに制限を守れば何度も続けて使用することができますので、実質無制限で使用可能です。

以上がブラウザ版での使用方法でした。

「TinyPNG」を利用する前の画像と圧縮後の画像を比較検証

では、圧縮前の画像と TinyPNG で圧縮した後の画像を比較してみましょう！

このように TinyPNG によって、331KB → 106KB へと容量が68% 削減され、圧縮に成功しました。

元の画像と後の画像とでは、目をじっと凝らさない限り見分けがつかないような気がします。

私がちょっと気にかかったのは、パンダのお腹の細かい毛の部分。少し粗さが目立つような。。。分かりますかね？皆さんいかがですか？

TinyPNG – JPEG, PNG & WebP image compression(プラグイン版)について

先ほどまではブラウザ版の紹介でした。

続いては、WordPress をお使いの方ならご存知のプラグイン版です。それが「TinyPNG - JPEG, ,PNG & WebP image compression」です。

機能は同じですが、先のブラウザ版なら手動で行う必要がありましたが、プラグイン版なら機能を有効にすることで、画像をアップロードするたびに自動的にこのツールが圧縮してくれます。

導入すると、画像圧縮を意識することなくブログが書けるのでとても便利です。

しかし、このような機能満載なツールには次のような利用制限が設けられています。

TinyPNG – JPEG, PNG & WebP image compression の利用条件と制限

プラグイン版の利用条件

アカウント登録が必要
無料圧縮は月々500枚までが限度(それ以降は有料)
圧縮枚数は月毎にリセットされる

※無料でできる圧縮枚数は月々500枚までですが、次項で解説するようにオプションを設定することで、月々100枚程度しか無料で使えなくなる場合があります。

※ブラウザ版にはこのような限度枚数はありません。

TinyPNG – JPEG, PNG & WebP image compression の導入方法(インストール)

TinyPNG – JPEG, PNG & WebP image compression のインストール方法を解説します。

① WordPress の管理画面から「プラグイン」→ 「新規追加」をクリック

② TinyPNG – JPEG, PNG & WebP image compression を検索するために、「TinyPNG」で検索。(これだけで十分見つかります)

③ そのプラグインを「インストール」→ 「有効化」をクリック

これにて、TinyPNG – JPEG, PNG & WebP image compression プラグインのインストールは完了です。

しかし、このプラグインは「有効化」にしただけでは使うことができず、アカウント登録をしてお使いの WordPress と紐付けなくてはなりません。続いてその実行方法を解説していきます。

④ WordPress 管理画面から「設定」→ 「TinyPNG – JPEG, PNG & WebP image compression」を開く。

⑤ 「Register new account」にフルネームとメールアドレスを入力して「Register Account」をクリック。

ブラウザ版の TinyPNG のサイトから上記のような同様の登録の仕方で、APIキーを取得し、WordPress と紐づける方法もあります。しかし、プラグイン版を利用するなら上記の作業の方が楽です。(どちらを実行しても結果は同じ)

⑥ 登録宛メールアドレスに tinify.com から次のような案内メールが届くので、「Activate your account」をクリック。

⑦ 次のような画面に切り替われば登録完了です。(公式サイトに遷移して TinyPNG アカウント画面が開きます)

⑧ リロードをかけてもう一度、設定画面の Tinify account を見ると「Your account is connected」と表示され、今月の圧縮可能枚数が確認できます。

以上でアカウント登録が終わり、WordPress とプラグインが紐付けされ、使用する準備が完全に整いました。

あとはプラグインの設定を行うだけです。

TinyPNG – JPEG, PNG & WebP image compression の設定方法(オプション)

それではプラグインの設定に移ります。(先ほどアカウント入力をした項目の下段)

以下の3点を設定します。

New image uploads
Image sizes
Original image

それでは順番に解説していきます。

設定① New image uploads

こちらの設定は、「WordPress に画像を新規にアップロードした際、どのようなタイミングで圧縮を行うか」を選択するものです。

Compress new images in the background (Recommended)
(新しい画像をバックグラウンドで圧縮 (推奨))
: 処理が最も高速だが、画像関連のプラグインによって問題が生じる可能性あり
Compress new images during upload
(アップロード中に新しい画像を圧縮)
: アップロードに時間が掛かるが、他のプラグインとの互換性が高い
Do not compress new images automatically
(画像を自動的に圧縮しない)
: 圧縮したい画像を手動で選択する

推奨されている一番上のものを選択しておいて、もし不具合が出るようなら、2番目の項目を選べば良いでしょう。

設定② Image sizes

こちらの設定は、「圧縮の対象となる画像サイズの選択」となります。

上の3つはWordPress のメディア設定による依存から来るもので、また下の項目は現在使用中のテーマに依存して変わるものです。

無料版では一月あたり圧縮できる枚数が500枚と制限がありますが、チェックを入れた分カウントし算出されます。上記の例では、4つの項目にチェックを入れたので、500/4 で 125枚となっています。(あくまで算出値)

ここで、何も選択しないと自動的にどのサイズも圧縮されなくなるので、プラグインを導入している意味がありません。必ずどれかにチェックを入れましょう。
逆に当たり構わずチェックを入れるのも不適切です。なぜなら容量の小さいサイズまでもが圧縮されてしまい、月間の限度枚数を消費してしまうからです。できるだけアイキャッチやサムネイルなどの容量の大きいサイズのものが圧縮されるよう、普段から使うサイズを考えてチェックを入れるのが妥当です。

ポイント

選びすぎない。
普段使っている大きめのサイズの項目を選ぶ。
めったにアップロードしないサイズや小さいサイズの項目は外す。

設定③ Original image

こちらの設定は、「設定②で「Original image」にチェックを入れた場合にのみ表示され、画像サイズの上限を設定」することができます。

「Resize the original image」にチェックを入れることで幅と高さの上限を設定することができます。

幅の上限と高さの上限を指定することで、ここで指定した以上のサイズの画像をアップロードした際、この指定サイズにリサイズかつ圧縮されます。

例えば、幅と高さとも1024pxに制限したとします。その場合、それ以上のサイズの画像をアップロードした際、(1024x1024)pxにリサイズと同時に圧縮されることになります。

しかし、チェックを入れることでこれもカウントされてしまい、圧縮限度枚数が減ってしまいます。不要なら外しておくのが無難です。

最後に「変更を保存」をお忘れなく。これで TinyPNG – JPEG, PNG & WebP image compression の設定は完了です。

過去にアップロードした画像を圧縮する方法

このプラグインを知らず、後から導入した際、当然それまでの画像は圧縮されていませんよね。

しかし、TinyPNG – JPEG, PNG & WebP image compression は過去の画像も圧縮させることが可能です。

以下、2通りの方法があります。

一括圧縮
個々圧縮

① 一括圧縮

圧縮されていないアップロード済みの画像を全てまとめて圧縮させる方法です。

ダッシュボードから「メディア」→「Bulk Optimization」を開く。
「Bulk Optimization」のページで未圧縮の画像を圧縮した際、上限500枚を超えた費用が算出されます。500枚を超えないならば、「Start Bulk Optimization」ボタンが表示されますが、それを超えるなら「Upgrade account」が表示されます。

だいぶ後からになってこのプラグインを導入した方は、今までの画像を一括圧縮させることになると、おそらく500枚は超えてしまうので、次で行う個々圧縮の方が良いでしょう。