みなさん、Web用の画像の書き出しって最近どう使い分けしていますか？？
私がWebデザインをはじめたころはIE6が全盛期だったこともあり、
あまり透過PNGを使うという選択肢がなかったのですが、
jsなどでコーディング時に対応できる手法が出てきた頃から
透過PNGを多用するようになりました。
（ちなみにDD_belatedPNG.jsというのをよく使っています）
また、昔は一部のガラケーでGIFに対応していなかったり、
PNGに対応していなかったり…なんてこともありましたよね。
それで自動的に選択肢が決まっていたり…など。
いろいろと状況が変わった今、
改めて画像の書き出し形式について考えてみました。
自分の状況や知っていることなどをまとめてみたのですが、
間違っていることや古い認識もあったりするかもしれないので
これは間違ってるよ！などありましたらご指摘いただけますと幸いです＞＜
それぞれの画像形式の特徴など
| PNG | 特徴 | PNG-8、PNG-24、PNG-32の3種類がある。 フルカラーに対応。(PNG-24/PNG-32) アルファチャンネル使用可。透明度を指定した透過画像を作成することができる。(PNG-32) 可逆圧縮式。 ファイル単体でのアニメーションの作成はできない。 PNG-8で同条件で書き出した場合、GIFに比べ容量を小さくできる。 |
| 向き | アイコンやロゴなど比較的解像度の小さな写真など | |
| 不向き | 古い機種にも対応させなければいけないガラケーサイト：一部古い携帯電話ではPNGをサポートしていないものがある IE6に対応必須の場合： IE6以前の古いブラウザでPNG8以上の透過PNGに対応していない（※jsなどでコーディング時に対応可能） |
|
| GIF | 特徴 | アニメーションを作る場合や 背景を透過させたい時に使用されることが多い。 1色の透過はできるがアルファチャンネルは使用できない。 1つのファイル中で使うことができるのは256色まで。 |
| 向き | アニメーションGIF作成時 PNGが使えない状況でのベタ面の多いイラスト、ロゴなど |
|
| 不向き | サイズの大きな写真等を含む画像の書き出し時 色数か256色以上使われている写真等の書き出し時 |
|
| JPEG | 特徴 | 大きな画像や色数の多い写真などを使用する際に使用することが多い。 画像圧縮形式（不可逆圧縮）。 圧縮率の変更ができるため、データサイズを調整することが可能。 圧縮率を上げすぎるとデータサイズは小さくなるが画質は劣化する。 |
| 向き | 大きな写真など階調の細かい色数の多い画像 | |
| 不向き | アイコンやロゴなどの輪郭がはっきりしているもの（PNGやGIFのほうが優れているため） |
PNGそれぞれの特徴と違い
| PNG-8 | 8ビットカラー（256色）まで書き出し。透明色の指定可。IE6でもjsなどでの対応なく透過できる。 |
| PNG-24 | 24ビットカラー（フルカラー）書き出し。透明色の指定不可。 |
| PNG-32 | 24ビットカラー（フルカラー）にアルファチャンネル情報（8ビット）を付与した形式。 透明度情報を持つので画像の容量が大きくなる。 IE6で透過させたい場合、jsなどで対応が必要 |
※ご指摘いただいてPNG-24の部分を修正しました。
※間違いがあればご指摘いただけますと幸いです。
私の使い分けの現状
| PNG-8 | 透明化があるロゴやアイコンで色数を256色以下に抑えられるもの |
| PNG-24 | 色数が256色を超える画像 透明化の必要がなく使用している色数が非常に少ないロゴやアイコン （PNG-8よりPNG-24のほうが容量が小さくなるが場合がある） |
| PNG-32 | デザイン的にどうしても透過が必要な色数の多い写真など 半透明の透過の表現が必要なもの |
| GIF | 形式指定がある場合のバナー アニメーションGIFバナー ガラケーサイト用のロゴやアイコン |
| JPEG | 写真全般。 背景に透過の必要がないもの バナー（容量を押さえるためにFireworksでJPEGマスクを使って文字情報の部分だけキレイに書き出したりしています） |
Fireworksでプレビューしながら
できるだけ一番容量が小さくてきれいになるものを選んで書き出しているので、
明確にきっちりこう！とわけている訳ではないのですが、
大きくわけると大体こんな傾向になっているような気がします。
みなさんはどのように使い分けていらっしゃいますか？？
こだわりなどありましたら良かったら教えてください！！
しかしこんな風に分類してみたものの、
こだわってPNGやJPEGのいろんな圧縮テクニックを使って
ひとつひとつこだわって調整すると、JPEGがいいと思っていたものが
PNGでもっと軽く書き出せたりとかいろいろあったりしますよね…。
（私は、現状そこまでできていません…；；）
うーん。書き出し、未だに奥深い＞＜
☆追記☆
いろんな方にご意見をいただきました。
ありがとうございます！
私と似たような状況の方や、PNG一択という方、まだPNGに抵抗があるという方、さまざまいらっしゃいました。
このあたりは答えがないのでホントに奥が深いですね。
自分でもまだ答えが出せていないので、
後日いろいろ書き出し比べてきちんと検証して新たに記事にしてみたいと思います。