スマートフォン最適化ノウハウコラム

スマフォサイト制作に必須!画像軽量化ツール・サービスの比較検証まとめ


PCでのWebサイト閲覧時と比べ、携帯電話(ガラケー・スマートフォン)は通信速度が遅くWebサイトのデータサイズ削減がより重要になっています。
近頃ではそれに加えてパケット定額プランが終了し従量課金制になるという話しも出てきたため、今後は更に重要性が増してくる気がしている今日この頃です。
実際、Touch&Slideへのスマートフォンサイトの高速化・軽量化に関するご相談・ご依頼が増えてきています。

そこでWebサイトにおいて、データサイズの大半を占めるであろう画像データを軽量化するツール・サービスの比較をしてみました。
※ツールに関してはWindows対応のものだけですが、Webサービスに関してはMacも対応しております。

まずは軽量化する画像の準備

画像は以下の4つを使います。
デザインからスライスする際のツールはFireworks CS5を使用しております。

JPEG
画質100%で書き出し
PNG-8
透過なしのものを全ての色を割り付けで書き出し
PNG-32
透過処理したイラストと写真を2つ書き出し

※上記の画像はサムネイル用に縮小しております。
実際に計測した画像サイズはサムネイルをクリックすることで確認頂けます。

この時点での各画像のサイズは以下の通りです。

JPEG PNG-8 PNG-32(透過写真) PNG-32(透過イラスト)
データサイズ 332 KB 2.33 KB 87.9 KB 16.5 KB

準備が出来たところで早速各ツール・サービスを使い軽量化していきたいと思います。
※データサイズはWindows7のエクスプローラーでの表記を載せています。

ツール

Caesium

JPEG・PNG・BMPに対応しており、複数の画像を一括で処理やJPEGの品質設定など細かい設定が出来ます。

上図の設定にし、JPEGは画質100%でやってみたところ約19%の減量になりましたが、PNGは全て大幅増になりました。

JPEG PNG-8 PNG-32(透過写真) PNG-32(透過イラスト)
元データ 332 KB 2.33 KB 87.9 KB 16.5 KB
処理後 270 KB 3.4 KB 226 KB 344 KB

Riot

JPEG・GIF・PNGに対応しており、明るさやコントラストなど簡単な画像処理も出来ます。また「Compress to size」というボタンからサイズを指定した軽量化もでき、なかなか高性能なツールです。

JPEGは上図の通りの設定にし、PNGはPNG-8のみ減色「Optimal 256 Colors Palette」に変更しました。また、透過を維持するためMaskタブから「Keep transparency」を選択しました。

JPEG PNG-8 PNG-32(透過写真) PNG-32(透過イラスト)
元データ 332 KB 2.33 KB 87.9 KB 16.5 KB
処理後 233 KB 1.9 KB 87 KB 15.9 KB

AzConvPNG

PNGに記録されている無駄な情報を削除し画像を劣化させずに軽量化することが出来ます。

PNG-32だけ増えてしまいました。色数が多いものは増加する傾向にあるのかもしれません。

JPEG PNG-8 PNG-32(透過写真) PNG-32(透過イラスト)
元データ 332 KB 2.33 KB 87.9 KB 16.5 KB
処理後 非対応 1.93 KB 90.5 KB 13.8 KB

PNGGauntlet

こちらもPNGを劣化させずに軽量化するツールで画像を一括で処理出来ます。JPEGにも対応していますがJPEGかPNGに変換してしまうようです。

PNGは全て軽量化に成功しました。

JPEG PNG-8 PNG-32(透過写真) PNG-32(透過イラスト)
元データ 332 KB 2.33 KB 87.9 KB 16.5 KB
処理後 495.79 KB 1.86 KB 84.31 KB 14.74 KB

PngOptimizer

こちらもPNGを劣化させずに軽量化するツールです。設定する項目などはなくとてもシンプルですが、画像の一括処理には対応しています。

JPEG PNG-8 PNG-32(透過写真) PNG-32(透過イラスト)
元データ 332 KB 2.33 KB 87.9 KB 16.5 KB
処理後 非対応 1.9 KB 86.6 KB 13.5 KB

ウェブサービス

JPEGmini

JPEGを知覚的な劣化をさせずに軽量化出来ると一時期話題になったウェブサービスです。

JPEG PNG-8 PNG-32(透過写真) PNG-32(透過イラスト)
元データ 332 KB 2.33 KB 87.9 KB 16.5 KB
処理後 92.9 KB 非対応 非対応 非対応

JPEGminiだけ異常に軽量化されてますが、これはツールでは画質100%設定にしてエンコードしていることに対し、JPEGminiでは恐らく画質をある程度落としてエンコードしているためだと思われます。
そこで、Fireworks CS5・Caesium・RiotでJPEGminiと同じくらいのデータサイズになるように書き出し、画質が高いと思う順番を10名にアンケート取ってみました。


↑それぞれクリックで拡大します。

上図が左から順にJPEGmini・FW CS5・Caesium・Riotでエンコードしたものとなってます。皆さん、画質が一番良いものはどれだと思いますか?結果については記事の最後で!

punyPNG

AzConvPNGやPNGGauntletと同様にPNGを劣化させずに軽量化するウェブサービスです。

全て軽量化出来ました。特にPNG-32イラスト版が他のツール・サービスと比べて最も軽量化されてます。

JPEG PNG-8 PNG-32(透過写真) PNG-32(透過イラスト)
元データ 332 KB 2.33 KB 87.9 KB 16.5 KB
処理後 非対応 2.04 KB 85.1 KB 13.2 KB

表にまとめると・・・

PNGの軽量化ではPNGGauntleが総合的に良い結果を出してました。
一括処理やある程度の設定も出来るため通常はPNGGauntleを使いつつ、PNG-32の透過イラストをより軽量化したい際にはPunyPNGを使うといった形がよさそうです。

JPEG PNG-8 PNG-32(透過写真) PNG-32(透過イラスト)
元データ 332 KB 2.33 KB 87.9 KB 16.5 KB
Caesium 270 KB 3.4 KB 226 KB 344 KB
Riot 233 KB 1.9 KB 87 KB 15.9 KB
AzConvPNG 非対応 1.93 KB 90.5 KB 13.8 KB
PNGGauntlet 495.79 KB 1.86 KB 84.31 KB 14.74 KB
PngOptimizer 非対応 1.9 KB 86.6 KB 13.5 KB
JPEGmini 92.9 KB 非対応 非対応 非対応
PunyPNG 非対応 2.04 KB 85.1 KB 13.2 KB

また、JPEGminiを基準に同程度のサイズになるよう他ツールで書き出し、画質が綺麗と感じた順番のアンケート結果は以下の通りとなりました(元データもまぜてみました)。

JPEGminiのサイズに合わせて軽量化したJPEG 投票数
1位 2位 3位 4位 5位
元データ 332 KB 9 1
JPEGmini 92.9 KB 3 3 5
Fireworks CS5 画質82% 91.9 KB 3 3 3 1
Caesium 画質88% 94.4 KB 1 3 3 3 1
Riot 画質89% 90.4 KB 1 2 1 3

アンケート中「全部同じに見えるけど…」と呟いてる人が数人いましたが、画質の差は2~3倍に拡大してようやく「ちょっと画質悪いかも?」といった程度にしか感じられないようです。
それでも画質が一番良いと感じるものと一番悪いと感じるものは投票数に明らかな差が出て面白い結果となりました。

結果だけ見るとJPEGに関してはFireworksで書き出した状態で十分…といったところでしょうか。


  • カテゴリ/スマートフォンコーディング
  • ↑このページの上部へ