ウェブディレクション ユーザビリティ SEO アクセス解析 デザイン制作 システム webapi使い方サンプル 見本になるサイト

gif、jpeg、PNG8、PNG24のそれぞれの画像ファイルの違い

webサイト制作で利用する画像形式の「gif」、「jpeg」、「PNG8」、「PNG24」。

フォトショップなどでウェブ用画像を書き出しをしようとすると、どれか選ぶようになりますね。
これらのそれぞれの画像ファイルの違いは?といわれると
gif、jpeg、PNGの違いぐらいなら、なんとなく解るという人もいるかもしれませんが、

では、PNG8,PNG24の違いは?

といわれると以外と解らなかったりしませんか。

このページではそれぞれの画像形式の特徴について掲載してみましたので、用途に合わせて利用するファイルを選んで、webサイト制作をしてみてくださいな。

GIFファイルの特徴


色数: 256色だけしか色をもてない
圧縮方法:可逆圧縮
透明処理:透過機能あり(透過かそうでないかの2種類だけ選べるというもので、たとえば50%だけ透明に透過しているなどの処理はできないため、輪郭の部分の処理などは自ずと汚くなります。)
アニメーション:アニメーション機能有り

JPEGファイルの特徴


色数:数百万色表現が可能
圧縮方法:非可逆圧縮、高い圧縮率
透明処理:透過機能なし
アニメーション:アニメーション機能無し


PNG8ファイルの特徴


色数:256色だけしか色をもっていない
圧縮方法:可逆圧縮、高い圧縮率
透明処理:透過機能あり
ただしIE6およびそれよりも前のIEにはPNG8、PNG24の透過機能は基本的には利用できない。
アニメーション:アニメーション機能なし


PNG24ファイルの特徴


色数:数百万色表現が可能
圧縮方法:可逆圧縮、JPEGよりもサイズが増える
透明処理:透過機能あり。
ただしIE6およびそれよりも前のIEにはPNG8、PNG24の透過機能は基本的には利用できない。
アニメーション:アニメーション機能なし
ファイルのサイズ:jpegよりもファイルサイズは大きくなる傾向にある


*可逆圧縮とは圧縮前のデータと、圧縮をしたデータが、完全に等しくなることができるデータ圧縮方法のことで、ロスレス圧縮とも呼ばれるものです。JPEGの非可逆圧縮はその反対で、圧縮したデータと元のデータが等しく同じ物になることはありません。
何の事やら、よくわからないという人は、可逆圧縮はweb制作などで使う分にはあまり問題にはならないので、気にしなくてもいいかもしれません。

というわけで、どのようにそれぞれのファイルを使い分けるか、ですが、こんな感じで↓使い分けてみると良いかもしれません。(あくまで参考です)

まず、アニメーションしたいかどうかを考えます。
アニメーションをしたい場合は「GIF」です。「GIF」しかありませんので…

その次考える事は透明処理です。
IE6はサポートブラウザとして考えており、さらに透過する画像が必要な場合は基本的には「gif」になります。(*ただし上記の記載の通り50%だけ透過しているなどはできないので、サイト
デザインによりけりですが、透過gif画像とwebサイトの背景色などが極端に異なる場合、画像の輪郭部分等は汚くなる場合があります。)

また、透過する画像が必要だけどIE6はサポートブラウザに入れる必要ない、などの場合はpng24などにすれば良いと思います

それ以外の場合は、画像の内容によってファイルサイズを比べつつ、どのファイル形式がよいか選ぶということになります。

ブロードバンドが発達した現在だと、シビアに画像のファイルサイズを気にするような事はしなくていいかもしれませんが…

gif、png8、png24、jpeg の4つを圧縮をいろいろ試してみて、圧縮後の画像のクオリティとファイルサイズを比べどれが適しているか調べるとよいでしょう。







Yahoo!ブックマークに登録     
このエントリーをはてなブックマークに追加

無料素材イラストダウンロード
今週のピッアップ記事
ウェブディレクターズスタッフブログ

メルマガ購読・解除
 
webディレクターズリンク集