最適な拡張子を選ぶには?

結論から言うと

一昔前は、PNGに対応していないブラウザや端末の存在を気にしなくてはなりませんでしたが、現在では例えばYahooなどの大手サイトでも積極的にPNGが採用されているので、あまり気にせずに、写真はJPG、それ以外はPNG-8(もしくはGIF)、透過が必要な場合はPNG24(32)が目安になります。

GIFについて

GIFは色数の少ない画像に使う拡張子

GIFはウェブ黎明期から存在する拡張子で、使える色数は256色まで(透過もOK)。写真以外のイラストやアイコンなどの画像に適しています。また、1つのファイルの中に複数のGIF画像をまとめて、パラパラ漫画の要領で、画像を順に表示させながらアニメーション効果を表現する「GIFアニメ」が作れるのも特徴です。

GIFに変わる次世代拡張子の誕生

元々、このGIF(の圧縮システム)はアメリカのUNISYS社というところが特許を持っていまして、当初は「GIFは無料だよ」という方針だったのですが、GIFが世界的に普及してからは「使用料ちょうだいね」という方針へ変換。これが引き金となって「だったら、別のフリーで使える画像拡張子を作ろうよ」という経緯でPNGが誕生します。つまり、PNGはGIFにかわる次世代的な拡張子なわけです。

そんなPNGは、256色のPNG-8と1440万色という膨大な色数を扱うPNG-24/32などがあり、イラストでも写真でも何でも扱える画像のスペシャリストです。

PNG-8への移行

現在では、GIFを使っていたものに関しては基本はPNG-8とし、念のためGIFでの書き出しサイズを比較して、小さいほうを選ぶようにしています。ただし、透過画像の場合は少し注意が必要になります。これについては後述します。

JPG

写真データはJPG

JPGも古くからある拡張子で、色数は1677万色。たくさんの色が使えるので写真画像を扱うのに適しています。PNGも同じ色数が使えますが、写真画像の圧縮に特化しているJPGのサイズは圧倒的に軽いのです。

JPGの特徴的な圧縮方法

JPGの圧縮は、画像を8x8ピクセル正方形のブロックごとに分けてそれぞれを均一な色に調整する手法です。これは、写真のような複雑に色が配置された画像に効果的な圧縮方法で、画質の劣化を目立たせずに軽量化することができます。また、圧縮率は好きなように調整できるので、画質を多少犠牲にできるのであれば、相当に小さなサイズの画像にすることができます。

ただし、JPG画像は、加工/編集のたびに画質が劣化していきます(コピーしたりする分には問題はありません)。なので、画像の加工が何度も必要な場合には、劣化がないPNGやTIFFで書き出しつつ、最終的に完成したものをJPGとして書き出すのが一般的です。

イラスト系には弱い

写真ではJPGに分があることが分かったところで、今度はイラスト画像で比較してみます。以下を見てもらえば分かるように、これに関しては圧倒的にPNGのほうが分があることがわかります。これは、JPGよりもPNGの圧縮のほうがイラスト系の色配置に強いためです。

色のメリハリが汚くなる

JPGは、メリハリがある色の配置に弱いのも特徴です。たとえば、上記の画像をJPGでもっと軽くしてから書き出そうとすると、色と色の境目周辺にノイズが発生します。

このように、写真に強くてイラスト系に弱いのがJPGの特徴です。なので、写真はJPGが絶対的にJPGとなります。ただ唯一の例外として、もしも透過が必要な写真の場合のみPNGとなります。

PNG

PNGの特徴

PNGは、写真とイラスト系の双方を扱うことが出来ます。ただし、上にも書いたように写真はJPGのほうが上手なので、例外がない限りはイラスト系のみPNGとします。PNGは主に以下2つが主流でそれぞれ扱える色数が違います。

PNG-8 8bit RGB(256色) + 8bit アルファチャンネル
PNG-24/32 24bit RGB(1677万7216色) + 8bit アルファチャンネル

どちらを使うかは、画像の色数によって異なります。従来のGIF画像にあたる色数の少ないものはPNG-8、それ以外のイラスト系はPNG-24/32が適しています。

ただし、色数が多くても使用されている色の種類によってはPNG-8でも比較的綺麗に書き出せることもあるので、念のためPNG-8でも確認するほうがいいです。

透過PNGはIE6/7/8が問題

PNGの取り扱いについては、これが唯一大きな問題点です。PNG-8はIE5から対応しているので問題ないのですが、PNG-24/32についてはIE7からの対応となります。画像のホバーアクションで透明度を上げる、なんて場合には画像が黒ずんだり綺麗に透過出来なかったり。特に透過画像にシャドウやグラデーションが入っていたり曲線が入っていたりすると、それだけでジャギが入ります。

この症状は、IE6/7/8で問題が発生するので、

  • AlphaImageLoader
  • DD_belatedPNG

といった方法で対策をする必要があります。これらの使い方については本記事では割愛しますが、透過PNGの扱い方にについては、ひとまずPNG-8でマットカラーを指定する方法での書き出しで対応できないかを検討したほうがいいです。

まとめ

写真はJPG、イラストやアイコンはPNG-8を基準にGIFと比較して軽いほうを選択、透過画像も出来ればPNG-8を基準にしつつも難しければPNG-24/32。ただし、スマホサイトの場合は透過PNGの使用に制限はないので、気にせず利用する、という感じでしょうか。