こんにちは。

今日は「画像の形式」について発信します。

 

Webの世界では

・JPEG
・GIF
・PNG

主にこの3種類の画像形式が使用されていますが、
これらの違いは何でしょうか。

 

「とりあえず…人物とかの画像はJPEGで…」
「イラストとかはGIF？」

 

と、なんとなくは分かっていても、
明確な役割は知らないなー、という方も多いのではないでしょうか。

 

そこで、まずは各形式の特徴を表にまとめました。

	JPEG	GIF	PNG
色数	1670万色	256色	280兆色
圧縮（≒劣化）	あり （また、圧縮率を調整可能）	基本なし （色数を調整可能）	なし
RGB （Web）対応	○	○	○
CMYK （印刷）対応	○	×	×
ファイルサイズ	小～中 （圧縮により変動）	小	中
主な使用用途	・データ転送速度を 重視する場面での「写真」 ・印刷される可能性のあるもの	・ロゴやイラスト   （2～3色）  ・アニメーション表現	・透過表現 ・色数の多いイラスト ・データ転送速度を 重視しない場面での「写真」
透過表現	×	△ （半透明は非対応）	○
アニメーション	×	○	△
使用を避けた方が良い用途	・ロゴやイラスト （ぼける）	・フルカラー写真 （色を表現しきれない） ・印刷される可能性のあるもの	・写真を多く使用しているサイト （ファイルサイズが大きくなり、 表示速度が下がるため、 JPGが望ましい。） ・印刷される可能性のあるもの

ポイントはPNGがサポートしている色の多さです。

280兆色って。

なにそれ多すぎる。

‥それはそれとして、

よくある疑問を以下にまとめてみました。

 

▼≪ 透過表現する時って、GIFでもPNGでも同じようなもんでしょ？ ≫

→ 結構違います。

GIFは「半透明」に対応していません。
なので透明ではない「塗りの部分」と、「透明部分」の「境界」が、
バキっとしてしまい、荒れてしまったりします。

「GIFの透過表現はイマイチ」です。

 

▼≪ JPEGより圧倒的に色数が多いんだから、写真は全部PNGで良いんじゃないの？ ≫

→ 場合によりけりです。

PNGは、もちろん写真も完璧に美しく表現できます。
しかし写真の場合、PNGではJPGより「ファイルサイズ」が大きくなる傾向にあります。

– – – – – – – – – – – –

Webサイトにおいて重要な「表示速度」は、画像のファイルサイズによって大きく左右されるため、
「PNGの方がキレイっしょ♪」として、写真を全部PNGにしてしまうと、
写真全部をJPGにしたサイトよりも読み込みが遅くなってしまいます。

なので

◇ 基本的にWebサイトにおいては、「 写真 」はJPGが最適

◇ 「読み込み速度なんかより、画質が命！」というWebサイトでの写真はPNGが最適

◇ 読み込み速度とか気にしない写真（メールで友達に送るなど）はPNGが最適

となります。

また、PNGは印刷に適さないため、

読み込み速度とか気にしない場面だけど、
印刷される予定がある写真、はJPGが最適となります。

ややこしいですね。

– – – – – – – – – – – –

また、Webでよく使用される「単一のグラデーション」や、
「色数の多いイラスト」レベルだと、PNGの方がキレイで、
かつファイルサイズもJPEGより抑えられたりします。

この場合はJPGを使用する理由はありません。

 

▼≪ PNGの方が圧倒的に色数が多いのに、なんでデジカメはJPG保存が基本なの？ ≫

→ PNGが印刷に対応していないためです。
PNGは「CMYK」をサポートしていないため、印刷にはまず使用しません。

よってJPG保存がデジカメの基本、となっています。

 

▼≪ PNGもボケずらいんだから、ロゴとかもPNGで良いんじゃないの？ ≫

→ 2～3色の場合はGIFの方がファイルサイズが軽くなりやすいです。
ただ4色以上になってくると、もうPNGがGIFより軽くなってきたりします。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

以上となります。

それでは またー。