Web便利ノート
cman.jp cman.jp > Web便利ノート > 画像(IMAGE)関連 > JPEG,PNG,GIFの違い

WEBで使用される画像「JPEG,PNG,GIF」の違い

ホームページで利用される画像種類(画像フォーマット)は主に「JPEG」「PNG」「GIF」となります。
どの画像種類を使えば良いかは、使用する画像の内容や用途にとって異なります。一般的に「JPEG」が多く利用されますが、文字ベースの画像などの場合は「JPEG」は見づらくなることがあります。

以下で画像の形式を変更することが出来ますので、実際に変換してご確認ください。
写真・画像のフォーマット変換

広告

JPEG,PNG,GIFの比較一覧

画像フォーマットによる主要な違いは以下となります。

JPEG (詳細)PNG (詳細)GIF (詳細)
拡張子.jpg .jpeg.png.gif
MIME
タイプ
image/jpegimage/pngimage/gif
サイズ下記参照下記参照下記参照
色数24bit
16,777,216色
24bit
16,777,216色
(48bitも可)
8bit
256色
透過×
(1色透過)
(半透明)

(1色透過)
アニメ××
用途写真写真
アイコン/ロゴ
アイコン/ロゴ
ページTOP

サイズと用途

画像の内容によりサイズは異なります。一般的に「写真はJPEG」「アイコンはGIF,PNG」と言われていますが、画像の内容や用途により画像フォーマット(画像種類)を選択する必要があります。
(注)下記サンプルは一般的な変換を使用しています。品質や圧縮の指定によってファイルサイズは大きく異なりますのでご注意ください。

JPEG (詳細)PNG (詳細)GIF (詳細)
写真 jpegサンプル1 pngサンプル1 gifサンプル1
303KB965KB451KB
○ サイズが小さい△ サイズが大きい○ サイズは小さい
○ 画像が滑らか ○ 画像が滑らか × 画像が荒い
テキスト jpegサンプル1 pngサンプル1 gifサンプル1
28KB6KB4KB
× サイズが大きい○ サイズは小さい○ サイズは小さい
× 文字が不鮮明 ○ 文字が鮮明 ○ 文字が鮮明
派手な
テキスト
jpegサンプル1 pngサンプル1 gifサンプル1
35KB40KB14KB
× サイズが大きい× サイズが大きい○ サイズが小さい
○ 画像が滑らか ○ 画像が滑らか × 画像が荒い
ページTOP

色数

GIFは256色までとなりますが、見た目では256色あればフルカラーと大きな違いはありません。
写真など綺麗に見せたい場合はフルカラーがおすすめとなりますが、ホームページのアイコンやイラストであれば256色でファイルサイズの小さいGIFでも十分となります。

JPEG (詳細)PNG (詳細)GIF (詳細)
色数フルカラー
24bit
16,777,216色
フルカラー
24bit
16,777,216色
8bit
256色
色の
見た目
jpegサンプル1 pngサンプル1 gifサンプル1
27KB4KB12KB
見た目に大きな違いはない
部分拡大
すると
jpegサンプル1 pngサンプル1 gifサンプル1
○ 滑らかに表示される○ 滑らかに表示される× 粗い表示となる
ページTOP

透過

透過を使用したい場合は「JPEG」は使用できません。また、半透明を使用する場合は「PNG」を使用する必要があります。

JPEG (詳細)PNG (詳細)GIF (詳細)
透過対応透過非対応透過対応
1色対応
半透明対応
透過対応
1色対応
一部透過 jpegサンプル1 pngサンプル1 gifサンプル1
19KB3KB2KB
× 透過しない○ 透過する○ 透過する
半透明 jpegサンプル1 pngサンプル1 gifサンプル1
17KB3KB2KB
× 半透過しない○ 半透過する× 半透過しない
ページTOP

アニメーション

アニメーション画像を使用する場合は「GIF」を使用する必要があります。

JPEG (詳細)PNG (詳細)GIF (詳細)
アニメーションアニメーション
非対応
アニメーション
非対応
アニメーション
対応
一部透過 jpegサンプル1 pngサンプル1 gifサンプル1
18KB6KB55KB
× 動かない× 動かない○ 動く
GIFアニメーションは 写真・画像のWEB加工【無料】 で作成できます
ページTOP

画像の変換

以下で画像変換や圧縮が可能ですのでぜひお試しください。
写真・画像のWEB加工【無料】

ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営:株式会社シーマン