GIF・JPEG・PNGの詳細
GIMPで作成するラスター（ビットマップ）系画像形式のGIF・JPEG・PNGの特徴と違いの比較（選び方）です。
ウェブサイトの制作で使用する画像は、それらの特性を理解して適切に選び使い分ける必要があります。
このページの目次
GIF
GIF（Graphics Interchange Format）は、圧縮・展開しても劣化しない可逆圧縮ができる（256色以下の場合）画像ファイル形式です。
イラストやボタンなどのGUI部品のような同じ色が連続している色数の少ない画像の保存に適しています。
圧縮前の色数が256色を超える場合は減色処理を行うため、なめらかな階調表現が難しくなり圧縮効率も悪く容量が増します。
透過表現
1色を透明として表示する透過GIFで背景などを透過できますが、完全に不透明か完全に透明の1階調のみなので、背景が透明部分と同じ単色以外の場合と、垂直・水平方向の直線以外の境界がアンチエイリアスで中間色となっている部分はきれいに透過できません。
その他
ファイルの読み込みに合わせて段階的に画像を表示するインターレースの設定ができます。
複数画像を1つのファイルにまとめてアニメーション表示するアニメーションGIFもあります。
JPEG
JPEG（Joint Photographic Experts Group）は、圧縮・展開すると劣化する非可逆圧縮ができる画像ファイル形式です。
写真などのフルカラーで隣接する画素に色の変化が多くある画像の保存に適しています。
圧縮率を上げるほど容量は減りますが品質が下がり、8 x 8pxのブロック単位での処理に由来するブロックノイズと呼ばれるモザイクのようなノイズが目立つため、内容に応じて容量と品質のバランスで圧縮率を決める必要があります。
その他
プログレッシブの設定ができます。
PNG
PNG（Portable Network Graphics）は、圧縮・展開しても劣化しない可逆圧縮ができる画像ファイル形式です。
イラストのような色数の少ないものから写真のような色数が多いものまで対応できますが、GIF・JPEGと比べてファイルの容量が増える傾向にあります。
透過表現
8ビット（256階調）のなめらかな透過ができ、配置する部分の背景にきれいになじむため、写真のような色数が多い内容で背景を透明にしたい場合に利用します。
GIF・JPEG・PNGの比較
圧縮前の画像の内容ごとに品質と容量の違いを解りやすくまとめました。
| 形式 | GIF | JPEG | PNG |
|---|---|---|---|
| 拡張子 | .gif | .jpg | .png |
| 透過 | ○（1ビット） | × | ◎（8〜16ビット） |
| 用途 | イラスト | 写真 | イラスト・写真 |
|
写真素材 （クリックで拡大） |
12,737バイト × グラデーションは段差が見られる |
2,146バイト（品質 = 50） ○ グラデーションはなめらか |
22,572バイト ○ グラデーションはなめらか |
|
イラスト素材 （クリックで拡大） |
1,190バイト ○ ベタ塗りは斑がない |
1,439バイト（品質 = 50） × ベタ塗りはノイズが出る |
1,278バイト ○ ベタ塗りは斑がない |
関連情報
Copyright © Kurikaraya All Rights Reserved.