色数制限がなく、且つアルファ付き透明要素を持たせられる便利な24bit PNG（PNG-24）ですが、JPEGやPNG-8、GIFなどと比較してデータ容量が重くなるのが悩みの種でもあります。
とは言え、PNG-24を使わざるを得ない場面では、他に選択肢がないのも事実。
そこで、そんなPNG-24のデータ容量を少しでも軽減してくれるImageOptim.appをご紹介。
そもそもPNG-24はどんな場面で選ぶファイル形式なのか
一先ず、PNG-24（透明あり）、PNG-8（透明あり、透明ディザ：誤差拡散法88%。白マット）、PNG-8（透明あり、透明ディザ：誤差拡散法88%。赤マット）、JPEGを比較した下の3つの画像をご覧ください。
▼白背景
▼赤背景
▼グラデーション背景
マットと背景色が同色の場合は違いがわからないかと思っていましたが、アンチエイリアシング部分を見ると違いが明白ですね。
グラデーション背景の中央部分を拡大すると、その違いがわかりやすいでしょうか。
PNG-8はアルファを持たない透明なので、透明部分は「完全に透明か、完全に不透明かの」の2値です。
それで無理矢理アンチエイリアスを表現すると、上記のようになってしまいます。
背景が単色の場合は、マット色を合わせることでギリギリ誤魔化せるかどうかまでにはなりますが、それなら透明なしで背景色込みのPNG-8とした方がクオリティーが高い上にデータ容量も削減できますので、敢えて透明を選ぶ必要はありませんね。
透明PNG-8やGIFを使用すべき場面は、また別の機会に掘り下げてみます。
上記の通り、透明要素を持たせたい場合は、一部特殊ば条件を除けばPNG-24一択とならざるを得ない訳です。
ImageOptim.appのデータ削減効果
PNG-24は便利で万能ですが、唯一の難点は他形式と比較してデータが重いこと。
その欠点さえなければ、Webサイトで使用する画像は全てPNG-24に統一してもいいと思うほどです。
※とは言え、全ての場面で必ず他よりPNG-24が重くなる訳ではありません。
※他形式よりも画像レンダリングにマシンパワーが必要だという欠点もあります。
そこで私は使わざるを得ない場面でのダメージを可能な限り軽減するために、PNG-24の画質を落とすことなく容量を軽くしてくれるImageOptime.appを使用しています。
兎にも角にも、効果をご覧ください。
対象ファイルは、PNG-24 透明あり。
［節約率］という列が元の容量と軽減された容量の比率ですが、なんと40%以上も軽くなっています！！
今までの経験上、透明PNG-24の場合は20〜70%の節約率アベレージです。
それも70%がレアなわけではなく、写真にアルファグラデが入っているような元々重い画像なんかで結構出ます。
画像のデータ容量はサイトのデータ容量
1つ1つの画像のデータ容量はたかが知れていますが、ちりも積もればです。
サイト全体で使用する画像を、クオリティを犠牲とせずに50%削減できるとしたら、それはサイトの表示するためのデータダウンロード時間が2倍速くなるのと同義ですから、非常に価値が高い行為だと言えると思います。
「ブロードバンド」という言葉すら聞かなくなった昨今なので、昔のように画像のデータ容量をちまちまと削ることに頓着しなくなってきているように感じる場面も多々ありますが、反面、表示スピードへの評価も高まっている気運があります。
画像ファイルをまとめてドラッグアンドドロップで突っ込んだらあとは待つだけの工程ですので、リリース前、納品前にでもまとめてやっておく価値はありますよ。
OLDER
