テック・ガジェット・写真とか

画像サイズを小さくするTinyPNGの便利な使い方

AD

「TinyPNG」は、PNGの最適化の非可逆処理と透過PNG処理は、写真や画像の質を落とさずに画像のサイズ容量を小さくしてくれ、無料で利用できるオンラインサービスだ。

これを利用することによりサーバーの軽減、ページの読み込み速度を向上させユーザーのストレスを軽減する。その処理は、AdobeのPhotoshopで書き出すよりも画像サイズを小さくしてくれるので利用している人も多いだろう。

画像の圧縮サンプル

最近話題のゲームMonument Valleyの画像をiPhoneでスクリーンキャプチャを撮った画像をサンプルでどれぐらい圧縮されるのかを紹介。

これは、PhotoshopのPNG 8で書き出しした画像。
よく見ると画像の4隅が縞模様になっているのが分かる。
画像のサイズは、29.8kb。
Photoshop PNG8で書き出し

これは、Photoshop PNG 24で書き出しした画像。
綺麗だが、83.4kbもある。
Photoshop PNG24で書き出し

TinyPNGで圧縮した画像。
上記のPhotoshop PNG 24で書き出しした画像とほぼ変わらないのに、画像のサイズは26.2kb。
TinyPNGで圧縮

JPGは用途に合わせて使った方がいい

Tinypngは、PNGだけではなくJPGも圧縮してくれる。

下記の写真をちょいと借りてサンプルを紹介してみようと思うが、写真などにはあまり向かないというのが分かる。
「待って、まだ今日は帰らないで…」と彼を引き止める女性［モデル:大川竜弥］ | すべて無料の写真素材(フリー)-PAKUTASO/ぱくたそ

①写真を600×400に縮小してPhotoshopの画質100で書き出ししたJPG。
画像サイズは146Kb。
Photoshopの画質100で書き出し

②写真を600×400に縮小してPhotoshopの画質65で書き出ししたJPG。
画像サイズは、43.9kb。
上記の①の写真と比べて女性の後ろの風景や男性の頬の色味が少し落ちているのが分かる。
Photoshopの画質100で書き出し

③続いては、上記の①の写真(146kb)をさらにTinypngで圧縮。
画像サイズは33.6Kb。
上記の写真②と比べて女性の背景、男性の頬のあたりの色がのっぺらとしている感じがし、さらには女性の髪の毛が顕著に濃淡がなくなってのっぺらとした感じになっているのが分かる。
TinypngでJPGに圧縮

上記の結果からしてJPG形式の圧縮は、サイトにアクセス時の表示スピードで見せたいのであればTinypngを使用し、写真をもう少し綺麗に見せたいのであればPhotoshopで書き出しをするのがいい。
ちなみに写真をPNG形式で保存した状態でTinypngを使用すると、容量が大きくなるのは言うまでもない。

Tinypngの使い方

サイトのオンライン上での利用

上記の圧縮時の違いを確認して貰った上で、まずは一般的な使い方。

サイトにアクセスするとパンダが出迎えてくれる。
https://tinypng.com/

そしたら、画像をドラッグしてアップロード。
画像はPNG形式じゃないとエラーになり、同時に20ファイルのアップロード、画像1枚に付5MBまでをアップロードできる。
写真や画像をドラッグ

画像によっては50%まで圧縮できるものもある。
圧縮が完了したら、downloadをクリックしてダウンロードするだけ。
写真なや画像をダウンロード

Photoshop用Tinypngプラグインでの利用

TinyPNGは便利だが、上記のようにサイトにアクセスして作業するのもいちいち面倒で、Photoshopでその作業が出来ないかなと思ったら、思いっきりPhotoshopプラグインが販売していることに気がついた。

MacとWindows版があり、値段は35ドル、約3500円ぐらい。
今後も間違いなくブログを書き続ける限りは、その手間隙を考えたら大人の力でポチった。
なお、このプラグインはPhotoshop CS5以降の対応となっている。

Windowsでの手順を一応紹介。
まずはここのページにアクセス。
https://tinypng.com/photoshop

画面下部まで行くとWindowsとMac用のPotoshop用TinyPNGプラグインの購入案内があるので、どちらかを選択。
名前、Eメール、そしてクレジットカード番号の入力。
クレジットカードは、番号、有効期限の月、年、そして、CVC Codeの入力。
CVC Codeは、クレジットカードの後ろに記載されている3桁の数字だ。
Potoshop用TinyPNGプラグインの購入

あとは、「Get the plugin」をポチッと押すとメールが届くのでそこに記載されているURLにアクセス。

そしたら、ライセンスとプラグインをダウンロード。
ライセンスとプラグインのダウンロード

ダウンロードした「TinyPNG-v1.1.exe」をダブルクリックでインストール。
次に「TinyPNG.license」のファイルをPhotshopのプラグインフォルダにコピー。
例
C:¥Program Files¥Adobe¥Adobe Photoshop CS5 (64 Bit)¥Plug-ins

Photoshop用TinyPNGの画像書き出し手順

画像の書き出し手順は以下の通り。
メニューの「ファイル」　→　「書き出し」　→　「TinyPNG…」

メニューの「編集」　→　「ショートカットキー」でショートカットキーを割り当てておくと便利。

これが書き出し画面だが、設定する項目は特に何もない。
書き出し画面では画像が若干ボヤケて見えるが、実際に買い出しした後は問題ない。
書き出し画面

WordPress用プラグイン

TinyPNGは、APIを公開しており、それを利用することでプログラムを組んでその圧縮の技術を利用することで、わざわざサイトに訪れることなく圧縮の技術を利用することができる。

プランが３つ用意されており、プランによって月に使用できる画像の枚数は異なるが、Freeプランを利用すれば、月500枚までは無料で利用できる。
個人であれば十分ではないだろうか。

  • Free:500枚／月　無料
  • Small:3500枚／月　15ドル
  • Large:5000枚／月　100ドル

そして、そのAPIを利用したWordpress向けにプラグインが公開されているので、それをちょいと紹介。

TinyPNG APIキーの取得

WordPressのTinyPNGのプラグインを利用するには、APIキーの取得が必要だ。
まずは、下記のページにアクセス。
https://tinypng.com/developers

メールアドレス、名前を入力して「Get your API key」をクリック。
メールアドレスの登録

するとメールアドレスにAPIキーを取得するためのURLが送られてくるので、それをクリックするとこんな感じの画面が表示されるので、APIキーをコピっておく。
TinyPNG APIキーの取得

Compress PNG for WP

ここからプラグインをダウンロード。
http://wordpress.org/plugins/compress-png-for-wp/

ダウンロードした「gecko-tiny-png-index.php」ファイルを開いて、116行目の下記の行にAPIキーを入力。

$key = get_option( 'gd_tiny_png_key', 'ここにAPIキー' );

設定したら、ファイルをアップロードして有効化。

後は、通常の画像や写真をアップロードするだけで自動で圧縮してくれる。
なお、圧縮は少々時間時間がいるので、画面が切り替わらなくてもしばらく待つ必要がある。

既にアップロードした画像も、「メディア」→「ライブラリ」とアクセスして、「Compress now.」で圧縮してくれる。

TinyPNG for WordPress

もう一つ、使い勝手がイマイチだが、TinyPNG for WordPressっていうのも紹介。

プラグインをここからダウンロードか、「TinyPNG for WordPress」を検索して新規追加。
http://wordpress.org/plugins/tinypng-for-wp/

続いては下記のフォルダを作成。
/wp-content/uploads/TinyPNG

プラグインを有効化すると、管理画面の左サイドメニューに「TinyPNG」とうメニューが追加されるので、そこにアクセス。

E-MailとAPIキーを入力して「Submit」。

後は、ファイルをアップロードして「Convert these images」で圧縮してれるのだが、圧縮した画像は「/wp-content/uploads/TinyPNG」の直下に保存されるので、それを表示して挿入し無くてはならない面倒さがある。

GRUNTでの利用

Web制作自動化ツールGRUNTを利用している人もいるだろうが、上記のAPIを利用したものと同じように、GRUNTで利用できるようにしたものがあるが、使い方がこちらのサイトで紹介されているので、チェックしてみるといいだろう。
http://hyper-text.org/archives/2014/02/grunt-tinypng.shtml