SitePoint: New Articles, Fresh Thinking for Web Developers and Designers

Webサイトで利用する画像フォーマットとしてPNGが採用されるケースが増えている。PNGはGIFと似たような特徴を持っているものの、GIFと異なり透過画像をちゃんと扱え、さらにGIFよりも画像データサイズが小さくなるという特徴がある。写真フォーマットにはJPEGを採用し、それ以外にはPNG8を採用、より複雑で滑らかな画像フォーマットが必要になるならPNG24を採用するというのが最近のひとつの画像採用指針となっている。

PNG画像の最適化についてはSergey Chikuyonok氏がSmashing Magazineに掲載した次の記事が参考になる。

• PNG最適化テクニック

Sergey Chikuyonok氏の記事ではPNGの画像フォーマットの仕組みを説明したうえで、どうすれば最適化を実施できるかが紹介されている。またPNG最適化を実施するツールとしてOptiPNGおよびpngcrushが紹介されている。Alex Walker氏がSitePointにおいてSquishing the Last Drops from Your PNGsのタイトルのもと、PNG最適化テクニックに言及したうえでさらに簡単にPNGの最適化を実施する方法としPunyPNGを紹介している。

• PunyPNG - PNG Image Optimization and Cmpression - Gracepoint After Five

PunyPNGサイト

PunyPNGでPNG画像を最適化した場合の例

PunyPNGはpunypngをオンラインで利用できるようにしたもの。画像を選択してアップロードすれば自動的に最適化が実施されダウンロードできるようになる。Alex Walker氏はSquishing the Last Drops from Your PNGsにおいてランダムに画像の最適化を実施したところ、どれもさらに最適化できたと説明している。

ロゴなどの画像データは最初から小さいため、さらに絞り込む必要があるのかという疑問に対しては、CSS Spriteのように小さい画像をひとつの大きな画像にまとめてから配信するというテクニックが使われているため、一つ一つのサイズは小さくても最終的にダウンロードすることになる画像のサイズは大きいものになり、こうした最適化は有効としている。

Net Applicationsの報告によれば、バージョン別WebブラウザのシェアはIE6が25.25%として首位をキープしているが、このIE6はPNGの透過処理がうまく扱えない。PNGで透過データを使う場合、IE6での表示も考慮するのであれば対処が必要になる。CSS SpriteやIE6における透過PNGについてはJPEG、GIF、PNG画像選択の指針まとめに説明と関連情報がまとまっている。