私が普段画像圧縮する際は、PNGは「Pngyu」、JPEGは「Photoshop」で圧縮し仕上げに「ImageOptim」を使っていますが実際のところ圧縮率は？画質はどうなの？という疑問があります。
今回は各ツールで圧縮した画像の容量・画質を比較していこうと思います。
現在、画像の形式はJPEGとPNGがメジャーです。
理由は色々ありますが使い分けは、写真やグラデーションが含まれるものなど色数が多いものがJPEG、色数の少ない画像や透過を含む画像はPNGが良いとされています。
今回はその2つの形式で比較していき、それぞれの得意分野・不得意分野の画像の圧縮がどれくらい変化するのか見ていこうと思います。
今回は以下の画像のjpeg・pngを用意しました。
ベタ塗りイラスト(pngは透過)
・弊社ロゴ
・Adobe Illustratorで作成・WEB用に保存で書き出し
・圧縮で劣化しやすい赤系の色なので圧縮による劣化が確認しやすい。
写真
・私のデスクに置いてあったミニフィギュアたち
・iPhoneXRで撮影、Photoshopで切り抜き・リサイズ、WEB用に保存で書き出し
・覗き見みゃーメイド(ビッくらポン)
・考えない人(キャナルのガチャポン)
・リザー丼
比較結果
結果容量の変化は以下のようになりました！
数字は元画像に対しての割合です(小数点以下切り捨て、Mac Finderでの表示容量参照)
画質の比較ですが画像をホバーしてる間、拡大し未圧縮のものに点滅して変わるようになっています。
ルール・備考
・画像形式は変わらないようにする。
・設定は基本デフォルト
・圧縮後の容量には多少の上下があります
| 備考 | JPEGイラスト | PNGイラスト | JPEG写真 | PNG写真 | |
| 元画像 | 100% |  100% | 100% |  100% | |
| Squoosh | JPEGはMozJPEG(75%)、PNGはOxiPNGで圧縮 |  41% |  50% |  32% |  93% |
| Pngyu | PNG専門家 | – |  66% | – |  38% |
| TinyPNG |  76% |  50% |  73% |  35% | |
| compressor.io |  35% |
|  28% |  41% | |
| Photoshop | 保存形式でPNGが選択不可なためJPEGのみ |  158% | – |  66% | – |
| ImageOptim(可逆圧縮) |  94% |  50% |  78% |  93% | |
| ImageOptim(非可逆圧縮) |  41% |  50% |  39% |  37% |
50%まず一番に目につくのはPhotoshopのJPEGイラストですね。
なんで増えてんじゃい…。
普段圧縮作業をしている中でもPhotoshop単体でのの圧縮率の低さは感じていましたが今回の検証結果で顕著に出た印象です。
この後ImageOptimの可逆圧縮にかけることで元画像の47%まで落とせたのでPhotoshopで処理後の画像にはメタデータの付与が多いようです。
TinyPNGはJPEGも圧縮できますがやはりPNGを得意にしているという印象です。
SquooshのPNG写真は気になりますが、Squoosh・compressor.io・ImageOptimの非可逆圧縮は全体的に高水準で容量削減目的であればこのあたりが無難に良さそうです。
画質の方ですが一般的な圧縮率であればどれもほとんど変化がわからないので基本的に気にしなくて大丈夫そうに感じます。
強いて言うならJPEGイラストは縁の部分が多少圧縮して見えますね。
今回の結果を踏まえ私はしばらくImageOptimをメインで使っていこうと思います。
非可逆圧縮の圧縮率や画質の劣化があまり感じられなかったこともありますが、
その上で一番お手軽かつ対応形式が多いということで一番効率化に買ってくれるのではないかと感じました。
数ある画像圧縮サービスでどれを使おうか迷ったときは是非参考にしてみて下さい。
↓前回の記事
画像圧縮ソフト・ツール(フリーもあるよ)を比較してみた [紹介編]
■□■□■□■□■□■□■□■□■□■□
営業時間：平日9：00〜18：00
●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL：092-726-5550 FAX：092-726-5558
●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内
⇒ メールでのお問合せ
⇒ ホームページ制作実績
⇒ 会社案内
■□■□■□■□■□■□■□■□■□■□
