インターネットで使用する画像は主に「jpg」「gif」「png」という３つの形式があります。
そして、それぞれの画像形式には用途にあった最適な使い方という物があります。
例を挙げると「写真を公開」「イラストを公開」「ＣＧを公開」といった物があります。
では、実際にどういった特徴があり、どういった用途で使用するのが適当か学んでいきましょう。
全然難しくないので直ぐに分かりますよ。
| 一目で分かる？ 簡易一覧表♪ | |||
| 形式 | jpg | gif | png |
| 画質劣化 (圧縮) |
有 (非可逆) | 無 (可逆) | 無 (可逆) |
| 圧縮方法 | 情報切捨 | 減色 | (劣化無) |
| 再現色 | 24bit | 8bit | 24bit |
| 色の透過 | × | ○ | ◎ |
| アニメーション | × | ◎ | △ |
| 随時表示 | ○ | ○ | ○ |
| 最適な画像は？ | |||
| 単色画像 | × | ○ | ○ |
| イラスト | × | ○ | ○ |
| フルカラーＣＧ | ○ | × | ◎ |
| モノクロ写真 | ○ | ○ | ○ |
| カラー写真 | ◎ | × | △ |
| 補足事項 | |||
| 形式 | 今回比較する画像形式です。 | ||
| 画質劣化 (圧縮) |
画質が劣化する圧縮方法を非可逆圧縮、劣化しない方は可逆圧縮といいます。 | ||
| 圧縮方法 | jpgは画像情報を切り捨てて、gifは色を減らすことで圧縮しています。pngは元の画像を損なわずに圧縮できます。 | ||
| 再現色 | 「8bit=256色」「24bit=16,777,215色」を示す | ||
| 色の透過 | jpgは透過不可。gifは一色透過。pngは複数色透過できますがブラウザの対応がまちまちなので一色透過。 | ||
| アニメーション | gifのみアニメーションできます。pngも別形式でできますがブラウザが未対応です。 | ||
| 随時表示 | 読込完了前に徐々に表示していきます。jpgはプログレッシブ方式、gifとpngはインターレス方式によります。 | ||
| 最適な画像は？ | |||
| 単色画像 | 単色画像はpngかgifで保存します。jpgで保存した場合は汚くなる上にサイズが大きくなることもあります。 | ||
| イラスト | イラストは通常モノクロ(8bit)２５６色なので画質劣化しないpngかgifで保存します。jpgで保存した場合は汚くなる上にサイズが大きくなることもあります。 | ||
| フルカラーＣＧ | 色の微妙な変化を明瞭にするために画質劣化のないpngで保存します。汚くなってもサイズを節約するならjpgで保存します。 | ||
| モノクロ写真 | jpgはグレースケールを指定でサイズ減。 | ||
| カラー写真 | 画質劣化が気になる場合はpngにしても良いがサイズが大きくなります。 | ||
| 各画像形式の最適な使い方 | |||
| jpg | 不可逆圧縮。画質は劣化するが写真などのような複雑な画像に威力を発揮する圧縮形式。 写真などの風景画では画質劣化は認識されにくい。写真の記載には王道形式です。 | ||
| gif | 可逆圧縮。現在はアニメーションにのみ使用することを推奨。ライセンス問題もある為あまり使用しない方が賢明です。アニメーション以外はpngでの代用可。 | ||
| png | 可逆圧縮。旧ブラウザは未対応。画質劣化がないので使用を推奨します。減色でファイルサイズを減らして使用するのが望ましい。 | ||
圧縮率(減色)と画質とファイルサイズについて考察します。