お疲れ様です、コーダーのtanです。

最近スマホサイトがはやってますね。
そこで見直され始めてきているのが画像のサイズです。
表示を早くするためにいろいろな方法がありますが、画像サイズの書き出し方で画像の容量を小さくすることに着目してみました。

いままでは書き出す画像がどのようなものかによってjpgかgifかを選び、耐えられるレベルまで画質を下げるのが定番だったと思います。
pngも昔からあったのですが、IEの存在によって敬遠されていたようです。
果たしてどれほど画像サイズは変わるのでしょうか。

実験体はこれです。

FWで1ドラッグで描けるベタな星。
背景は白ベタ、星は黄ベタ、境界はアンチエイリアスありです。
ちなみに一番軽かった画像をここにあげてますので、ネタバレ嫌な人は画像形式見ないでくださいね。

 

まずはjpg、gif、png(PNG32)で比較してみました。

1位　gif

2.14KB

2位　png(PNG32)

2.22KB

3位　jpg

4.92KB

 

gifとpngはあまり変わらないですが、jpgは倍以上ありますね。
今回色数少ない画像でやっているので、jpgは圧倒的に不利です。

 

実はpngにも種類があります。
FWでサポートしているものを片っ端から書きだしてみました。

1位　PNG8

1.66KB

2位　PNG32

2.22KB

3位　PNG24

2.32KB

4位　Firewoks PNG

55.3KB

 

意外にもPNG24よりPNG32の方が軽かったです。どんな画像かによっても変わってくると思いますが。
スライスを消し、レイヤーは1枚で極限まで情報を減らしても、Firewoks PNGは比較にならないくらい重いですね。

 

ここでPNG8。

【PNG8とは】

立ち位置的にはgifに似ていて、256色までサポートしています。
透過はgifと違いアルファ値を持っています。
劣っている点といえばアニメーション機能がないことでしょうか。

 

今回白ベタだったので、透過させることで軽くならないのか？と思いいろいろ試してみました。

1位　アルファチャネル　アダプティブ

1.01KB

2位　透明化なし　アダプティブ

1.66KB

3位　インデックス透明カラー　アダプティブ

1.68KB

4位　透明化なし　すべての色を割り付け

1.85KB

5位　アルファチャネル　すべての色を割り付け

1.99KB

6位　インデックス透明カラー　すべての色を割り付け

2.03KB

 

 

これはすごい結果がでました。
同じPNG8でも設定を変えるとこんなに違うんですね。

 

1.01KB…
jpgの1/5、gifの1/2です。

 

 

今回は色数の少ない白背景という条件での比較でしたが、思った以上におもしろい結果が出ました。
軽く！軽く！とは言え目視での劣化判断してこそだと思っているので、やりすぎないように気をつけながらまた実験したいです。

 

方法もいろいろあるのでひとつひとつ取り入れていきたいですね。