JPEG ・ GIF ・ PNG の違い。じつは曖昧にしか知らないかも…。
- 2013/11/28
- WEBデザイン
- この記事は約3分で読めます。
こんにちは。
今日は「画像の形式」について発信します。
目次
形式の「明確な違い・役割」って?
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より軽くなってきたりします。
========================
以上となります。
それでは またー。