みなさんはサーバーにあげている画像を圧縮していますか？
していない方はこの機会にぜひとも圧縮する習慣をつけてみてはどうでしょうか。
今回は、ソフト版3つ、オンラインツール版3つを対象に調べてみます。 最近めっきりjpgを使わなくなってきたのですが、この機会にjpgの圧縮についても調べてみました。
目標としては、圧縮時間は早く、可能な限りきれいに、極力まで最小限に圧縮として調べていきます。
なぜ画像を圧縮するのか
そもそも画像を圧縮する理由ですが、単純に転送容量を少なくするためです。
画像を圧縮すれば、ユーザーに送る容量を減らせるので、ページの表示時間を短くできます。
サーバーのHDDの使用容量を減らせるというメリットもあるかもしれませんが、最近のサーバーはHDD容量が結構あるので特に気にしなくてもいいと思います。
ソフト版
と、前置きはこれくらいにして、ソフト版はPNGGauntlet、Voralent Antelope、pngquantという3つのフリーソフトを比較します。
PNGGauntlet
ここ数年PNGGauntletを使い画像の圧縮をしてきました。
今回使用するバージョンは3.1.2です。
Voralent Antelope
今回の記事を書くにあたって、新たに知ったソフトです。
今回使用するバージョンは5.2です。
黒系のUIです。なんかちょっと好み。
pngquant（PNGoo）
こちらも今回の記事を書くにあたって、新たに知ったソフトです。
今回使用するバージョンは2.8.1です。
windows向けのPNGooで調べます。
圧縮率を比較
png
圧縮効率がいいものは青文字、悪いものは赤文字としています。
| PNGGauntlet | Voralent Antelope | PNGoo | |
|---|---|---|---|
| 01.png | 893.01KB 29%減 | 926.13KB 26%減 | 297.06KB 76%減 |
| 02.png | 414.35KB 25%減 | 414.36KB 25%減 | 257.25KB 53%減 |
| 03.png | 437.13KB 19%減 | 437.13KB 19%減 | 240.02KB 55%減 |
| 04.png | 373.79KB 19%減 | 385.32KB 16%減 | 282.45KB 38%減 |
| 05.png | 17.17KB 12%減 | 17.2KB 11%減 | 8.62KB 56%減 |
| 06.png | 10.54KB 12%減 | 11.17KB 6%減 | 6.49KB 46%減 |
| 07.png | 1.43KB 67%減 | 1.68KB 62%減 | 1.94KB 56%減 |
| 08.png | 1.65KB 60%減 | 1.85KB 54%減 | 2KB 51%減 |
| 09.png | 0.79KB 58%減 | 0.88KB 52%減 | 1.06KB 43%減 |
| 10.png | 0.82KB 55%減 | 0.85KB 53%減 | 1.13KB 37%減 |
処理時間ですがこのような感じです。
PNGGauntlet、おっそ！
| PNGGauntlet | Voralent Antelope | PNGoo | |
|---|---|---|---|
| 計測時間 | 5分37秒 | 20秒程度 | 33秒程度 |
jpg
圧縮効率が1番いいものは青文字、悪いものは赤文字としています。
| PNGGauntlet | Voralent Antelope | PNGoo | |
|---|---|---|---|
| 01.jpg | 783.7KB 63%減 | 1648.23KB 23%減 | 292.78KB 86%減 |
| 02.jpg | 803.99KB 74%減 | 2386.17KB 22%減 | 317.29KB 90%減 |
| 03.jpg | 649.86KB 66%減 | 1487.38KB 22%減 | 361.75KB 81%減 |
| 04.jpg | 683.58KB 66%減 | 1606.05KB 20%減 | 478.56KB 76%減 |
| 05.jpg | 40.53KB 37%減 | 60.46KB 6%減 | 22.75KB 65%減 |
| 06.jpg | 20.73KB 47%減 | 36.97KB 6%減 | 12.96KB 67%減 |
| 07.jpg | 12.6KB 54%減 | 24.76KB 9%減 | 9.03KB 67%減 |
| 08.jpg | 13.85KB 58%減 | 30.23KB 8%減 | 9.57KB 71%減 |
| 09.jpg | 3.97KB 80%減 | 18.51KB 7%減 | 4.48KB 78%減 |
| 10.jpg | 4.2KB 83%減 | 23.36KB 7%減 | 4.76KB 81%減 |
さて、jpgの処理時間はこのような感じです。
これまたPNGGauntlet、おっそ！
| PNGGauntlet | Voralent Antelope | PNGoo | |
|---|---|---|---|
| 計測時間 | 7分17秒 | 5秒程度 | 34秒程度 |
ソフト版の評価
ファイルサイズの圧縮のみを考えれば、拡張子がpngの場合はVoralent Antelope、jpgはPNGooです。
ですが、PNGGauntletとPNGooはjpgを圧縮した際にpngとして書き出してしまいます。jpgの拡張子として圧縮したい場合には、Voralent Antelopeを使うかほかのツールを使う必要があるようです。
実際の圧縮画像で見比べてみましょう。
左からオリジナル画像、PNGGauntlet、Antelope、PNGooです。
パット見どれも問題なさそうですが、PNGooだけ黄色（アイコン部分）が強く出ている印象です。
オンラインツール版
さて、今度はオンラインツールの方を見ていきます。
TinyPNG、Kraken.io、Compressor.ioという3つのオンラインツールを比較します。
オンラインツール版での画像圧縮は自分のサイトで使うものだとあまり抵抗を感じないのですが、業務でタレントさんの画像とかも扱う時があるので仕事で使うには抵抗を感じてしまいます。
TinyPNG
一度にアップできるのは20枚で、1枚の最大容量は5MB。
某国際的ECサイトで使われている画像もここで圧縮されているようです。
Kraken.io
アップロードする枚数は特に制限が無いみたいですが、圧縮する画像ファイルの容量制限はたった1MBです。
| 【無料】 | 無料で使う場合は1枚の最大容量は1MB |
|---|---|
| 【有料】 | 有料会員は32MB |
Compressor.io
1枚の最大容量は10MB。
アップロードを一枚一枚しないといけない。
圧縮率を比較
どれほどの成績となるでしょうか。
png
圧縮効率が1番いいものは青文字、悪いものは赤文字としています。
| TinyPNG | Kraken.io | Compressor.io | |
|---|---|---|---|
| 01.png | 278.72KB 78%減 | 1259.19KB 0%減 | 296.07KB 76%減 |
| 02.png | 250.58KB 55%減 | 250.58KB 55%減 | 330.17KB 40%減 |
| 03.png | 207.22KB 62%減 | 220.59KB 59%減 | 311.34KB 42%減 |
| 04.png | 169.77KB 63%減 | 257.59KB 44%減 | 233.09KB 49%減 |
| 05.png | 7.87KB 59%減 | 7.99KB 59%減 | 5.2KB 73%減 |
| 06.png | 5.92KB 50%減 | 5.95KB 50%減 | 3.18KB 73%減 |
| 07.png | 1.53KB 65%減 | 1.53KB 65%減 | 1.14KB 74%減 |
| 08.png | 1.71KB 58%減 | 1.7KB 58%減 | 1.44KB 65%減 |
| 09.png | 0.85KB 54%減 | 0.83KB 55%減 | 0.71KB 62%減 |
| 10.png | 0.94KB 48%減 | 0.79KB 56%減 | 0.74KB 59%減 |
処理時間の方ですが、オンラインツール版は1枚づつ処理がされてしまうので、測定不能とします。
jpg
圧縮効率が1番いいものは青文字、悪いものは赤文字としています。
| TinyPNG | Kraken.io | Compressor.io | |
|---|---|---|---|
| 01.jpg | 371.46KB 83%減 | 2134.6KB 0%減 | 448.9KB 79%減 |
| 02.jpg | 465.77KB 85%減 | 3075.26KB 0%減 | 617.88KB 80%減 |
| 03.jpg | 316.21KB 83%減 | 1898.24KB 0%減 | 407.6KB 79%減 |
| 04.jpg | 301.25KB 85%減 | 2012.72KB 0%減 | 379KB 81%減 |
| 05.jpg | 22.16KB 65%減 | 21.4KB 67%減 | 12.85KB 80%減 |
| 06.jpg | 11.7KB 70%減 | 13.85KB 65%減 | 9.25KB 76%減 |
| 07.jpg | 4.5KB 83%減 | 7.52KB 72%減 | 4.82KB 82%減 |
| 08.jpg | 6.91KB 79%減 | 9.91KB 70%減 | 6.4KB 80%減 |
| 09.jpg | 3.57KB 82%減 | 5.34KB 73%減 | 3.78KB 81%減 |
| 10.jpg | 5.87KB 77%減 | 7.98KB 68%減 | 5.4KB 78%減 |
処理時間の方ですが、オンラインツール版は1枚づつ処理がされてしまうので、測定不能とします。
オンラインツール版の評価
pngの圧縮はCompressor.io、jpgの圧縮はTinyPNGが優秀でした。
Kraken.ioは有料会員があるので優秀なのかなとおもいきや、大したことは無いですね。記事を書いた時の最安プランはMicroプランで月$5ですが・・・違うツール使っちゃいますよね～。
オンラインツール版も実際の圧縮画像で見比べてみましょう。
左からオリジナル画像、TinyPNG、Kraken.io、Compressor.ioです。
これもパット見どれも問題ない気がします、TinyPNGとCompressor.ioは黄色（アイコン部分）が強く出ている印象ですね。
最後に
オンラインで画像を圧縮できるお手軽さは便利なのですが、優秀なオンラインツールでは黄色みが強くなってしまうというのがあるので、こだわりたい方はソフト版の方がいいと思います。
今回調べるために使用した画像のファイルサイズや画像サイズの情報です。
png
| 画像名 | ファイルサイズ | 画像サイズ |
|---|---|---|
| 01.png | 1259.19KB | 1255 x 2305 |
| 02.png | 552.34KB | 1200 x 5399 |
| 03.png | 539.11KB | 1200 x 3449 |
| 04.png | 458.69KB | 1200 x 2581 |
| 05.png | 19.42KB | 480 x 270 |
| 06.png | 11.95KB | 480 x 270 |
| 07.png | 4.39KB | 480 x 270 |
| 08.png | 4.07KB | 480 x 270 |
| 09.png | 1.85KB | 480 x 270 |
| 10.png | 1.81KB | 480 x 270 |
jpg
| 画像名 | ファイルサイズ | 画像サイズ |
|---|---|---|
| 01.jpg | 2134.6KB | 1255 x 2305 |
| 02.jpg | 3075.26KB | 1200 x 5399 |
| 03.jpg | 1898.24KB | 1200 x 3449 |
| 04.jpg | 2012.72KB | 1200 x 2581 |
| 05.jpg | 64.19KB | 480 x 270 |
| 06.jpg | 39.3KB | 480 x 270 |
| 07.jpg | 27.17KB | 480 x 270 |
| 08.jpg | 32.81KB | 480 x 270 |
| 09.jpg | 19.97KB | 480 x 270 |
| 10.jpg | 25.07KB | 480 x 270 |