TinyPNGは素晴らしい圧縮ができます。
しかし、1回だけだと物足りないことが判明しました。
今回は、TinyPNGを使った画像の圧縮効率と劣化について、比較していきたいと思います。
TinyPNGの圧縮効率は素晴らしい！
TinyPNGは、その圧縮効率の高さで知られる、Web上で動く画像圧縮サービスです。
1回の圧縮で、未圧縮の6～7割もサイズを削ってくれる（=サイズは3割程度に小さく）というのですから、重宝します。そして、劣化が少ないのです。
一回でもこの威力↓
そんなTinyPNGですが、モノによってはまだまだ圧縮してほしい、最大限まで圧縮してみたい、ということも少なくありません。
TinyPNGで圧縮していく
早速圧縮していきます。
今回圧縮するのはこちらの画像です。なお、PNG画像を使います。
.png)
画像の条件として、パソコンのデスクトップを模しています。例えば、デスクトップの背景に写真が使われていたり、ウィンドウは非常に簡潔な色だったりするので、これらを盛り込みました。
この画像を使って圧縮していきます。
圧縮する回数はTinyPNG一回当たりの限界である「20回」で実験していきます。
…………（数分後）。
20回圧縮し終わりました。
ブラウザが縦長になりました。 どんどん圧縮されていくのがわかりますね。
※ちなみに、これ以上画像を挿入すると「Too many files uploaded at once（一度にファイルをアップロードしすぎだよ！）」と言われてしまいます。一度に20個以上のたくさんのファイルをアップロードしたい人は、Proバージョンを契約するか、ブラウザを更新して20回ずつもう一度やり直すしかないです。
圧縮効率をグラフ化してみる
合計20回分の圧縮率と回数を比べてみました。
ちなみに、100%をオリジナル画像（未圧縮）にしています。
こうしてみると、見る見るうちに圧縮されていくことがわかります。
かんたんにまとめると、
- 1～4回目では大幅な圧縮が行われている
- 5回目以降は、ちょっとずつ進んだ
- 途中の15回目には他より差が出た
- 最終的なサイズ（20回目）はオリジナルの15%にまで小さくなった
という具合になりました。
画像の劣化具合を見てみる
ここで、圧縮した画像を比べてみましょう。比べるのは以下の3つです。
「オリジナル画像」「1回圧縮」「3回圧縮」「10回圧縮」「20回圧縮」
オリジナル画像は、このようになっています。（392KB）
1回目の圧縮では、このようになっています。（130KB）
オリジナルと比べても、ほとんどといっていいほど違いがありません。それでもサイズは1/3になっている点で、とても素晴らしいですね……。
※余談。以下からは（プラグインの仕様上オリジナル画像と比べることができなかったので）1回目のものと「3回目以降」のものを比べていきます。
スライドすることで、画像を比べられますよ！
（←左1回目 | 〇回目→）
3回目（93KB）
少し山の雪が色あせています。
10回目（72KB）
空にだんだんとノイズが走ってきました。
20回目（60KB）
全体的にだいぶ色あせてしまいました。これでも十分きれいですが。
よく見てみると、図形などの色が均等に広がっているところの変化は少なく、山や空のグラデーションのあるところにノイズや色あせが見られます。
ちなみに、このときのサイズは、約60KB。もとの15％ほどの大きさになりました。すごい圧縮です。
これでも、遠目から見たらわからないですね。
まとめ
TinyPNGは複数回併せてやることで、どんどん圧縮できることがわかりました。
ただし、劣化もどんどん起こるので、バランスを考えて、やりすぎないようにしましょう。
大体3～5回あたりがちょうどいい具合になります。（サイズと劣化のバランスがGood）
以上、「TinyPNGで画像を圧縮しまくったお話」でした！
コメントを残す