[ Home ]

[ 戻る ]

現在、ブラウザが表示できる（＝ホームページで表示できる）画像のファイル形式は、GifとJpegとPngです。それぞれの形式には長所と短所があるので、一概にどの形式がいいとは言えません。各ファイル形式の特徴を理解して、ベストの形式を選べるようになりましょう。 　 ａ）　Gif 形式 　ジフ、またはギフというファイル形式です（ジフという呼び名のほうが正しいです）。Gifは使える色数を256色までに抑え、横方向に同じ色が連続している部分を圧縮するという方法で、ファイルサイズを小さくしています。 　使用する色数が少なければ少ないほど、また、同じ色が横方向に連続していれば連続しているほど、ファイルサイズは小さくなります。 長所 画質の劣化がない、アニメーションが作れる、透明色（透過処理）が使える。 短所 最大256色しか使えない、256色以上使っている画像をGifに変換すると画質が劣化する。 　 　　Gifは、２５６色しか扱えないために、イラストやアイコンなど、色数の少ないものや、色がはっきりと別れているものに向いています。逆に、グラデーションのような微妙な色の変化を（＝多くの色を）必要とする画像には弱いです。 　グラデーション等、数多くの色を含む画像をGifに変換する場合、256色でそれらの微妙な色を表現する必要が出てくるため、画質の劣化が生じてしまいます。画像にもよりますが、この劣化が目立つこともあるので注意しなければいけません。 　 例） グラデーションの違い （オリジナル画像） （オリジナル画像拡大） きれいなグラデーションを描いている。 （Gif 画像） （Gif画像拡大） 色数が256色しか使えないため、グラデーションがざらざらしている。 　 　デジカメで撮影したような写真の画像も、256色に減色する事でGifファイルに変換することができます（ただし、通常であれば、デジカメで撮影した画像はJpeg形式を使った方がよいのですが）。しかも、上手に減色すれば画質の劣化を防ぐことができます。 　この減色の方法には、大きくわけて、ディザ（ディザリング）を行うか、行わないかの区別があります。ディザは複数の色を組み合わせて、256色以上の色を表現する技術です。そのため、ディザを行うと、色数が増える（＝ファイルサイズが大きくなる）他、画像がざらざらしたりします。 　 例）Paint Shop Pro6を使って、ディザ有り・無しで書き出した場合 （ディザなし） 　微妙な中間色が再現されずに、のっぺりした感じになる。 （ディザあり） 　複数の色を組み合わせて微妙な色を表現するのだが、そのせいで各色のドット（点）が目立ち、ざらざら感が出てしまう。 　また、ディザがないときと比べ、ファイルサイズも大きくなる。 　 　このように、減色には色々難しい問題があります。また、減色の際の画質は、使っているツールの性能に大きく依存します。そこで、減色専用のフリーツール「Padie」を使うと、驚くほど綺麗に減色することができます。複雑な減色するときは、かならずPadieで行うようにすると良いでしょう。

ｂ）　Jpeg形式 　ジェイペグというファイル形式です。jpgとも表記されます。人間の目では感じにくい色の情報を間引くことにより、高圧縮率（＝ファイルサイズを小さくする）で高画質の画像を実現しています。 　しかし、極端に圧縮率をあげると、当然、画像が汚くなっていきます（画質の低下）。また、一旦低下した画質はもとに戻らないので、必ずオリジナルの画像は別の場所に保管しておきましょう。 長所 圧縮率が高い（ファイルサイズを小さくできる）、約1677万色扱える。 短所 画質が劣化する、アニメーションが作れない、透明色（透過処理）が使えない。 　 　Jpegは写真などの画像に向いています。また、イラストなどでも、グラデーションが多用されているものにはJepgが最適です。ただし、圧縮率をあげていくと、画像がにじんだ感じになったり、境界の色が混ざって別の色が出てきたり、Jpeg特有のノイズが出てくるので注意してください。 　この、圧縮率と画質の兼ね合いがWebクリエイターの腕の見せ所です。できる限りファイルサイズを小さくしつつ、画質を一定に保つ必要があります。 　 例）圧縮率と画質の変化 □ オリジナル画像（BMPファイル形式。467KB） 　 　 □ 圧縮率20％（50.7KB） 　ほとんど見た目に変化はありません。大きく拡大すると、若干画質の荒れに気づくことができます。 　Jpegは色の変化がなだらかなグラデーションなどは得意なのですが、色が大きく変化する境目は、Jpeg特有の圧縮時のノイズが生じてしまいます。 　 □ 圧縮率40％（34.2KB） 　見た目にも、少し画質の劣化が分かります。拡大すると、画像の境界部分にノイズが生じているのが分かります。 　 □ 圧縮率80％（16.3KB） 　画質を損ねていますが、ファイルサイズはものすごく小さくなります。普通に見ても、境界部分のノイズが目立ちます。また、関係ないピンク色が生じています。 　以上から分かるように、グラフ、イラストなど、線の境界がはっきりしていたり、色の境目がはっきりしている画像には向きません（色のにじみが出てしまいますし、細かい線はぼけてしまいます）。 　低圧縮率（＝ファイルサイズが大きい）で高画質の画像ファイル（これをAファイルとします）をホームページで表示させたい場合は、そのAファイルを直接表示させるのではなく、Aファイルの縦横幅を縮小し、圧縮率も高くした低画質の画像ファイル（これをBファイルとします）を用意し、ページにはBファイルを表示させ、BファイルからAファイルへリンクを貼っておく方法が一般的です。 　こうすることで、直接Aファイルを表示させてページが重くなることを防ぐことができます。 　 　 ｃ）　Png形式 　ピングというファイル形式です。まだ普及していませんが、今後一般的になっていくだろうと言われています。 長所 画質の劣化が一切ない、透明色（透過処理）が使える、透明度が256階調使える（アルファチャンネルサポート）、約1677万色以上扱える。 短所 Jpegほどファイルサイズが小さくならない、まだまだ一般的ではない。 　Pngは「だんだん透明に」、「半分、壁紙が透けて見える」などの効果を出したい場合に最適です。なぜなら、Gifは「透明か、透明ではないか」の方法しかとれないのに対して、Pngは「少しだけ透明、かなり透明」など、透明度を調整した使い方ができるからです。 　ただし、Pngの透明度を完全に表現できるブラウザはまだ少ない上、ファイルサイズがJpeg 程小さくならないので、その点に注意する必要があります。

ｄ）インタレースGif、プログレッシブJpeg、インタレースPng 　インタレースや、プログレッシブとは、画像をモザイクがかった状態から徐々に鮮明にしていく表示方法です。インタレース（Gif・Png）の場合は、ファイルサイズが若干大きくなります。プログレッシブ（Jpeg）はファイルサイズは減少しますが、画像が少しぼけた感じになります。 　 　 ｅ）まとめ 　以上の長所・短所をふまえたうえで、皆さんが、ある画像をホームページで表示したいと思った際に、どのファイル形式を使うか決めていかなければいけません。 　GifかJpegかどっちがよいか分からない場合は、とりあえず、GifとJepg、両方で保存し、両者の画質を見比べたり、ファイルサイズをチェックしてみて下さい（Pngはファイルサイズも大きいですし、対応しているブラウザも少ないので、現段階では避けたほうがいいです）。 　 　各画像ファイルの性質を知れば、ペイントソフトのフィルター機能を効果的に使うだけで、ファイルサイズや画質をコントロールすることもできます。例えば、Gifは色数が少ない方がファイルサイズが減少するのですから、ぼかしフィルターは（色数が増えるので）不向きですが、逆に、シャープフィルターをかけるとファイルサイズが小さくなることがあります。 　またその逆に、Jpegは隣り合う色通しが似通っていれば似ているほどファイルサイズは小さくなり、圧縮時に生じる色のにじみもなくなるのですから、シャープフィルターは不向きですが、ぼかしフィルターかけると、ファイルサイズが小さくなったり、圧縮時の画質が良くなったりします（この辺りの詳しい話は http://www.coolandcool.net/ の「Web Tips講義と実践」を参考にしてください。）。 　 　なお、慣れてくると、ファイル形式を選ぶ際に、各ファイル形式の画質劣化を考慮して選べるようになってきます。以下、各ファイル形式の画質劣化の特徴を比較できるようにサンプルを並べておきます。 　 例）各ファイル形式による画質の劣化 オリジナル画像 （183KB） 　 　 Jpeg 形式 （12.7KB） 色と色の境界で色が混ざり、関係ない色が出てきたり、画像がぼけてくる。 　 Gif 形式 （19.0KB） 色が混ざることはないが、ディザ処理によるざらざら感が出たり、似た色に置き換えられたりする。 　 Png 形式 （69.7KB） 画質の劣化は全くなし。その代わりファイルサイズが大きくなる。