PNG・JPEG・GIF・WEBPの違いと選び方｜MIMEタイプ早見表つき

PNG・JPEG・GIF・WEBPの違いは？（比較表）

形式	圧縮	透過	アニメ	扱える色数	向いている用途
PNG	可逆	○	×	約1,677万色＋透過	ロゴ・図・透過画像	作る
JPEG	非可逆	×	×	約1,677万色	写真・グラデーション	作る
GIF	可逆	△	○	最大256色	簡単なアニメ・アイコン	作る
WEBP	可逆／非可逆	○	○	約1,677万色＋透過	Web全般（モダン環境）	作る

透過の「△」はGIFの2値透過（透明か不透明かのみで、半透明は不可）を表します。

同じ画像を4形式で保存すると容量はどう変わる？（実測）

「JPEGが一番軽い」とは限りません。1920×1080・背景色#DDDDDDの単色画像を当サイトの「解像度で作る」モードで各形式に出力した実測値は次のとおりで、JPEGが最も大きく、GIFが最も小さい結果になりました。

GIF 2,595 バイト

WEBP 3,774 バイト

PNG 10,602 バイト

JPEG 33,328 バイト

計測条件: 1920×1080 / 単色 #DDDDDD / JPEGは品質90 / 2026-08-02 に当サイトで生成して計測。
色数の少ない平坦な画像ではJPEGの非可逆圧縮が不利に働き、可逆圧縮のGIF・PNGやWEBPの方が小さくなります。逆に写真ではJPEG・WEBPが圧倒的に有利です。形式の優劣は画像の中身で入れ替わります。

各形式の特徴は？

PNG

可逆圧縮で画質が劣化せず、透過（アルファチャンネル）にも対応します。ロゴ・図・スクリーンショット・くっきりした線画に最適。ただし写真ではファイル容量が大きくなりがちです。

JPEG

非可逆圧縮で写真を小さくできます。透過は不可。色数の多い写真やグラデーションに向き、文字やくっきりした境界はにじみやすいのが弱点です。保存を繰り返すたびに劣化が蓄積します。

GIF

最大256色（8bitインデックスカラー）の可逆圧縮で、簡単なアニメーションに対応します。透過は「透明か不透明か」の2値のみで、半透明は表現できません。写真には不向きです。

WEBP

可逆・非可逆の両方に対応し、同じ画質ならJPEGやPNGより小さくできます。透過・アニメーションも可能で、2020年以降は主要ブラウザがすべて対応済み。Web表示全般でおすすめです。

拡張子・MIMEタイプ・ファイルシグネチャの対応は？

アップロード処理のバリデーションを書くときに必要になる対応表です。シグネチャ（マジックナンバー）は、当サイトで実際に生成したファイルの先頭バイト列を確認したものです。

形式	拡張子	MIMEタイプ	先頭バイト列	ASCII
PNG	.png	image/png	89 50 4E 47 0D 0A 1A 0A	‰PNG
JPEG	.jpg / .jpeg	image/jpeg	FF D8 FF	—
GIF	.gif	image/gif	47 49 46 38 39 61	GIF89a（87aもあり）
WEBP	.webp	image/webp	52 49 46 46 …… 57 45 42 50	RIFF……WEBP

WEBPは RIFF の4バイトのあとに4バイトのサイズが入り、その次の4バイトが WEBP になります（合計12バイト目まで見て判定）。GIFは GIF87a と GIF89a の2種類があり、アニメーションや透過に対応するのは89aです。

拡張子だけで画像形式を判定してはいけないのはなぜ？

拡張子は中身と無関係に変更できるからです。photo.png を photo.jpg にリネームしても、データの中身はPNGのままです。

拡張子…ファイル名の一部。ユーザーが自由に書き換えられる。信頼できない。

Content-Type（MIMEタイプ）…アップロード時にブラウザ側が申告する値。こちらも偽装可能。

ファイルシグネチャ…ファイルの実データ先頭にある固定バイト列。これが実質的な判定根拠になる。

画像アップロード機能をテストするときは、「正しい画像」だけでなく「拡張子と中身が食い違うファイル」「画像でないファイルに画像の拡張子を付けたもの」も用意して、想定どおり弾けるかを確認しておくと安全です。当サイトで各形式のダミー画像を作り、拡張子を書き換えればすぐに試せます。

ブラウザはどの形式に対応している？

形式	対応ブラウザ	対応時期の目安
PNG	すべてのブラウザ	1990年代から
JPEG	すべてのブラウザ	1990年代から
GIF	すべてのブラウザ	1990年代から
WEBP	Chrome / Edge / Firefox / Safari	Safari 14（2020年9月）で全主要ブラウザ対応
AVIF	Chrome 85＋ / Firefox 93＋ / Safari 16.4＋	2023年3月に全主要ブラウザ対応

PNG・JPEG・GIFは事実上どの環境でも表示できます。WEBPは2020年以降、AVIFは2023年以降であれば主要ブラウザで表示できます。

どの画像形式を選べばいい？（用途別）

写真・色数の多い画像…JPEG または WEBP
透過が必要・ロゴ・図…PNG または WEBP
単色・色数の少ない画像…PNG または GIF（JPEGは不利）
簡単なアニメーション…GIF または WEBP
とにかく軽く・モダン環境中心…WEBP

テスト用のダミー画像はどの形式で作るべき？

本番で扱う形式に合わせるのが基本です。目的別の目安は次のとおりです。

アップロード上限・バリデーションの確認…実運用で受け付ける形式に合わせる。許可外の形式も1つ用意して弾かれるか確認する
レイアウト・プレースホルダー…PNG（背景色を指定して差し替え位置を分かりやすくする）
透過の扱いの確認…PNG または WEBP
アニメーションGIFの可否確認…GIF
WEBP変換・配信まわりの確認…WEBP

なお、容量そのものを検証したい場合は形式ではなく容量指定モードを使ってください。当サイトの容量モードは、どの形式を選んでも指定バイト数ちょうどに調整されます。

よくある質問

PNGとJPEGはどちらを使うべきですか？

用途によります。写真やグラデーションはJPEG、ロゴ・図・透過が必要な画像はPNGが適しています。文字やくっきりした線はPNGの方がきれいで、単色に近い画像ではPNGの方が容量も小さくなります。

WEBPは使うべきですか？

2020年9月のSafari 14以降、主要ブラウザはすべてWEBPに対応しています。同じ画質でJPEG/PNGより軽くできるため、Web表示では有力な選択肢です。非常に古い環境への配慮が必要な場合のみJPEG/PNGを選びます。

透過（背景を透明に）できる形式は？

PNGとWEBPが半透明を含む透過に対応しています。GIFは「透明か不透明か」の2値のみの簡易的な透過、JPEGは透過に対応していません。

JPEGが一番容量が小さいのではないですか？

いいえ、画像の内容によります。写真ではJPEGが有利ですが、単色や色数の少ない画像ではJPEGが最も大きくなることがあります。実際に1920×1080の単色画像を当サイトで生成すると、GIF 2,595バイト・WEBP 3,774バイト・PNG 10,602バイトに対し、JPEGは33,328バイトでした。

拡張子を .png から .jpg に変えれば形式は変わりますか？

変わりません。拡張子は名前の一部にすぎず、中身のデータ構造は別です。実際の形式はファイル先頭のバイト列（ファイルシグネチャ）で判定します。

AVIFが選べないのはなぜですか？

AVIFはさらに高圧縮な新しい形式ですが、本サイトのサーバー（GD）がAVIF対応でビルドされていないため現在は提供していません。

テスト用のダミー画像はどの形式で作ればいいですか？

本番で扱う形式に合わせるのが基本です。特に決まっていなければPNGが無難で、透過やアニメーションの挙動も確認したい場合はWEBPやGIFも用意しておくと安心です。

画像形式の違いと選び方