Asial Blog

Recruit! Asialで一緒に働きませんか?

SVGと画像ファイルの容量の差を検証-2 〜PNG,GIF追記〜

カテゴリ :
デザイン・UI
タグ :
Photoshop
Illustrator
SVG
PNG
GIF
こんにちは。和田です。
とうとう12月になりました。師走ですね。これからの年末、自分も頑張って走り抜けようと思います。

さて、今回は前回に引き続きといいますか、
「PNG,GIFとSVGを比較した方がよいのでは!?」というご意見いただきましたので、そちらの比較をしてみようと思います。

同じ図をSVGとPNG,GIF,JPGに出力して比較します。
画像の書き出し方法等は以下のとおりです。

・SVGへの書き出しは、IllustratorCS6で作成した図を別名で保存でSVG(1.1)にしています。
・SVGの保存時には「使用しているフォント」のみを埋め込みにしています。
・画像への書き出しは、IllustratorファイルをPhotoshopで開き「Web用に保存」で行っています。
・作成した図は320×320pxを原寸としています。(PC用サイトの小さいサイズの図をこの程度と想定して設定しました)
・保存形式はPNG、GIF、JPGにしています。
・書き出す画像のサイズは原寸、2倍、3倍、4倍、5倍の5種類です
・JPGの品質は「高画質」にしています。
・PNGは「PNG-24」「透明部分:なし」で書き出しています。
・GIFは「特定カラー:256」「ディザ処理アルゴリズム:誤差拡散法 100%」「透明部分:なし」で書き出しています。


◆ 規則正しい簡単な図の場合(パス数:122)


今回も規則正しい図(カラーチャートのような図)から比較してみました。以下のような2つの図です。

図−1

図−2




以下がSVG,JPEG,PNG,GIFの比較です。
サイズ(保存形式)図ー1図ー2
SVGJPEGPNGGIFSVGJPEGPNGGIF
原寸
(320×320px)
12KB25KB4KB12KB8KB49KB29KB25KB
2倍
(640×640px)
37KB5KB29KB115KB70KB45KB
3倍
(960×960px)
94KB8KB45KB188KB102KB66KB
4倍
(1280×1280px)
37KB12KB53KB225KB139KB94KB
5倍
(1600×1600px)
168KB16KB78KB332KB180KB119KB

※ グレー背景はSVGデータの以上の容量になったものです。

図−1については、PNGの容量が3倍の大きさまでSVGよりも小さくなりました。256色以下になるため、PNGの圧縮率が高くなったのかなと思います。

図−2ですと、今度は円の曲線部分のグラデーションが出てくるのでPNGの容量も大きくなってしまいました。代わりに画像の中ではGIFが一番小さくなりましたがSVG程の軽さまでは行きませんでした。
単純な曲線が入った図はSVGにあっているかもしれませんね。



◆ 会社案内の地図の場合(パス数:186)


次は、会社案内の図です。こちらも前回同様です。

図−3


SVG、JPEG比較図
サイズ(保存形式)図ー3
SVGJPEGPNGGIF
原寸
(320×320px)
98KB33KB33KB20KB
2倍
(640×640px)
82KB74KB41KB
3倍
(960×960px)
143KB119KB66KB
4倍
(1280×1280px)
217KB164KB90KB
5倍
(1600×1600px)
291KB217KB115KB

※ グレー背景はSVGデータの以上の容量になったものです。

図−3ですと、GIFが一番軽くなり、PNGはJPEGと大して変わらない値になりました。
色数が少ないということと、横方向に同じ色が続いている事がGIFを軽くさせたのではないかと思います。


◆ Webサイトにありそうな!?簡単な図の場合(パス数:529)


最後は簡単な図です。こちらも前回同様です。
320×220pxで作成しています。

図−4


SVG、画像比較図
サイズ(保存形式)図ー4
SVGJPEGPNGGIF
原寸
(320×220px)
156KB29KB33KB16KB
2倍
(640×440px)
61KB74KB37KB
3倍
(960×660px)
106KB123KB61KB
4倍
(1280×880px)
156KB168KB90KB
5倍
(1600×1100px)
213KB221KB119KB

※ グレー背景はSVGデータの以上の容量になったものです。

図−4ですと5倍の大きさにしてもGIFが一番軽くなりました。色数が少ないからだと思います。色数が増えた場合はディザの表現の限界も出てくると思いますので、そうした場合は他の画像と見比べてベストなのを選ぶのがいいかもしれません。
PNGはJPEGより少し大きくなりました。



さて、前回の追記と言う形でPNGとGIFについても比較してみましたが、今回の検証で使った図だけで言えば、Webで使われるような簡単な図ではGIFが一番軽いようです。
ただ、もっといろいろな図で検証すると他の結果もでてくるかもしれません。
ですので、サイトの環境に応じてベストなものを選ぶのがいいかもしれません。
個人的には、他の媒体(印刷物など)にも利用しやすいSVGが広まってほしい気がします。そう考えるのは僕だけですかね?

次回はフォントの埋込を検証してみたいと思います。
それでは、また次回です。