[PR]テレビ番組表
今夜の番組チェック

はじめに

このコンテンツの内容は、主にネットで特にフリーでCGを掲載しているサイトの 管理人様の方々に、少しでもお役に立てるようにと思い、WEB用の画像形式に関する 説明を行っております。なお、描画方法など、絵の描き方に関する説明などは、 トップにもある通り、一切ありませんので、ご了承ください。
こちらにある内容は、あくまでも技術的に関することのみです。
それと、すみませんが、この文章の内容の信頼性、および 参考にしたことによる不利益などに関しては、作者は一切責任を負いかねますので、 あらかじめご了承いただきますようお願い致します。

おおまかな各形式の簡易説明

まず、WEB用の画像形式としては、現在主流の画像形式は3種類あり、 それぞれJPEG形式、GIF形式、PNG形式という名称で存在しております。
拡張子はJPEGの場合は"jpeg"か"jpg"の二種類が存在します。 しかし、本来拡張子は三文字が主流(正確には基本として)でしたので、 古いOS等の場合は、三文字の方を推奨します。
それ以外の形式の拡張子の名称は、そのまま名称と一致していますので、割愛します。
それでは各形式の簡易的な説明を致します。

JPEG形式…

画像劣化あり、フルカラー専用

GIF形式…

画像劣化無し、256色パレット専用(ただし、色数を落とすのは可能)

PNG形式…

画像劣化無し、パレット形式可能(仕様はGIFと同じ)さらにフルカラーも可能

各形式の詳細な説明

それではそれぞれの形式の詳細な説明に入りますが、その前に、 それぞれの一般的な用途を説明致します。

JPEG形式… 写真など、色数が多くエッジがはっきりしていない画像など。
GIF、PNG形式… アニメ調の絵や、色数に制限のあるゲーム用のCGなど、 色が少なかったり、エッジがはっきりしている画像など。

ようやく各形式の詳細の説明に入ります。

JPEG形式…

画像をにじませることによって画像データを圧縮します。
その為に、画像データが劣化してしまう欠点がありますが、 圧縮率が画像データに左右されないというのが、他の形式にはない 長所であり、圧縮率を選ぶことも可能なので(注…ソフトによります)、 その点も長所ではあります。当然ながら圧縮率を上げるほど、画質は下がります。
逆を言えば、どのようなCGでも圧縮率は変わりませんので、下記にあるようなアニメ調の絵など、 他の形式で大きく圧縮率を落とせるCGなどにこの形式を選んでしまうと、 圧縮率と画質の両方を犠牲にしてしまう、まさしくダブルパンチな結果になってしまうので、注意してください。

GIF形式…

LZW形式と呼ばれる独自(これが特許関係で欠点にもなってます、詳細は後半に記述されてます) の圧縮アルゴリズムで、画像データを圧縮しますが、その圧縮で画像データが 全く劣化しないのが、長所です。
短所な点は、256色までしかない制限と、画像データによって、圧縮率が 大きく変わってしまう点です。
圧縮率の変わり方は、色数というよりは、同じ色が続いている部分が多いかによって、 一番変わりやすいので、圧縮率の変わり方は、LZHやZIPなどに似ています。
他に厄介な欠点は、データそのものとは無関係な欠点ですが、 LZW形式の特許でソフト側に対して特許料の徴収 (画像形式を使うだけでは対象にはなりませんので、その点はご安心ください) をはじめたために、GIF形式に対応したフリーソフトが激減した点です。
この面に関しては、ネットの公共の利益に反する行為として、 個人的には多少ながらも、怒りを感じてはいます。 (幸いなのは、近々この特許が無効になるという朗報があったことです、 ちょっと前に聞いた話なので、ひょっとしたらすでに無効になっているかもしれません、 実際の確認は恐れ入りますが、特許庁を検索してそこで調べてください)

PNG形式…

ある意味GIF形式とJPEG形式の特徴を両方取り入れているのが大まかな特徴であり、 上記の特許問題で新しく生まれた形式でもあるそうです。
現在は一番新しい形式とはいえ、誕生してからだいぶ 時期が経っているために、対応ソフトもすでに多くなっていますので、 互換性に関しても、現在ならば安心して使えると思います。
しかし、両方の特徴を取り入れているとはいえ、短所が無いわけではありません。 GIFと同じようにパレットを使った256色を使った形式と、JPEGのように 基本的に色に制限が無いフルカラーも利用可能ですが、 GIF同様に、画像データによって圧縮率の変化がありますので、 JPEGに利用するような写真などのデータに使うと、確実に圧縮率が悪くなります。
他の特徴は、当然ながら圧縮形式はGIFとは異なりますので、 タイプは似ているとはいえ、圧縮率に若干の違いが出ます。
それ以外に関しては、圧縮率の設定にいろいろな工夫がされており、 設定によっても圧縮率が変わります。ただ残念なのは、 そのカスタマイズできるソフトはあまり無いのが残念な欠点になってしまっています。 いわば、長所でもあり、欠点でもあるところだと思います。

用語解説

専門用語もたくさんありましたので、一応解説だけはしておきますが、 一部長くなるのがありますので、その用語の詳細な説明はすみませんが、 他のサイトなどで調べていただきますようお願い致します。

圧縮率…

現在も、全てのネットユーザーがネット環境が快適なわけではありませんので、 画像データのサイズも重要なテーマになります。そこで大事なのが圧縮率です。
当然ながら圧縮率が高い、良いと呼ばれるほど、元データに対してデータ量が軽くなっている ことになり、逆に低い、悪いなどと呼ばれるほど、元データに対してデータ量が あまり減っていないことになります。
なお、ソフトによっては、パーセント(割合)表示で説明するのも存在しますが、 圧縮率の数値表記が逆転している(つまり高いほど悪い)ソフトもありますので、注意してください。
ちなみに、データを劣化させない圧縮の一番簡単な基本アルゴリズムはランレングス圧縮と呼ばれています。 逆に劣化させるタイプで良く見かけるのは、MPEG形式などのムービー、MP3などやDVDビデオ(独自のMPEG2形式)などです。

パレット…

簡単に言えば、絵の具のパレットと似たようなもので、 使用可能な色を並べたものです。
つまり、簡単に言うと登録した色のみが、利用可能というわけです。
これ以上話すと長くなりますので、この辺で割愛させていただきますが、 パレットに関する知識は、特にゲームを作る上では重要 (特に最近はやりの携帯アプリや、ゲーム機用など本格的にされる方) なので、そのような方は、この辺もしっかりと勉強しておくことをお勧め致します。 (注…デザイナーのみではなく、特にプログラマー志望の方も含みます)

エッジ…

すみません…恥ずかしながら、正確な意味は自分もわかるわけではないですが、 要するに色の変化がはっきりしている部分があるという意味です。
たとえば、アニメ調の場合にはよくある、はっきりとした黒いラインです。 基本的に下絵は、市販の特に子供用の塗り絵のような感じになっている感じが一番適合しています。
いわば、塗り絵的な、べた塗りな感じのCGなどは圧縮率が高くなりやすい 代表的な系統のひとつとも言えます。

フルカラー…

PC内つまり、ローカルディスク用のCGなどでは一番一般的にもなっています。
色数は約1600万色ぐらいであり、パレットの概念も当然ながらありません。 また、人間の色の認識の限界を超えているとも言われており、 現在はハイカラーとも呼ばれているそうですが、これよりもさらに上の 色数が存在するのも、個人的には疑問ですが、この辺の理由はあまり分かりませんので、 割愛させていただきます。ただ、自分が聞いたうわさでは、 透過設定のためと聞いた覚えがあります。

画像状態対比

Photoshopで描いたPSDファイルのイラストから、 一般的なWeb用の高圧縮設定ともいえる、JPG形式と256色PNG形式の 二つの形式で、256色の方はさらに最適化の方法を 二通りにしてみたので、合計三通りの結果となります。 それぞれの画像の違いを実際にごらんになれば、 何となくこういう違いが出てくるんだと実感がわくはずです。
わかりやすいように色要素が沢山あるイラストとして、 昔に描いたシナモロールのイラストを用いてみました。 JPG形式は劣化がわかりやすいようにわざと 画質設定を最低(圧縮率最大)にしています。
元々イラストとはいえ、アンチエイリアスを きつめにしているので、JPG形式でも劣化が わかりにくいイラストなので、わざと目立つようにしました。
容量のほうでは、JPG形式が圧倒的に縮んでいますが、 圧縮優先の結果に過ぎず、PNG形式のほうは、 パレット形式としては色が大目ですので、 色を落としたり絵そのものを何らかの形で 最適化(エッジの強調やノイズカットなど)をすれば、 結果は大きく変動する点がポイントです。
また、画像を変換して保存するソフトによっても 結果が変動する可能性があります。 参考までに、こちらでの変換は全て PhotoshopCS2のWeb用の出力機能で統一しています。

JPG形式(フルカラー版)…

容量6485バイト

PNG形式(256色通常減色版)…

容量25135バイト

PNG形式(256色ディザ減色版)…

容量41011バイト

トップページに戻る