テクノロジー・動画・写真・デザインとか

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

「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で圧縮

写真にはあまり向かない

PNGは、画像を高圧縮してくれるのだが、万能というわけでもない。

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

写真をPhotoshopの画質65で書き出ししたJPG。
画像サイズは、41.3kb。
写真をJPGで書き出し

続いては、PhotoshopのPNG 24で書き出しし、さらにその後にTinyPNGで圧縮。
PNG24で書きだすと326.9kbもあるが、TinyPNGで圧縮すると96.1kbまで落ちる。
しかし、JPGの写真と比較するとボケ具合や色味、そして容量を比較しても明らかにJPGの方がいいというのが分かる。
写真をPNGで書き出し

PNGはGIFと似ており、どちらかと言うとイラスト向けの画像などを圧縮する時に使うのがいいが、例えば、文字と人物や風景が入ったバナー画像みたいな場合で人物や風景の割合が少ない場合には、このTinypngを使った方が容量が小さくなったりするので、用途に合わせて使い分けるといいだろう。

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

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

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

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

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

Photoshopプラグインでの利用

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を公開しており、それを利用することでプログラムを組んでその圧縮の技術を利用することで、わざわざサイトに訪れることなく圧縮の技術を利用することができる。

プランが3つ用意されており、プランによって月に使用できる画像の枚数は異なるが、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キーを入力。

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

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

既にアップロードした画像も、「メディア」→「ライブラリ」とアクセスして、「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