この記事をおすすめする方
- 資料作成やスクリーンショット貼り付けのとき、なんとなく拡張子を選んでいる人
- 「PNGとJPEGって何が違うんですか？」と聞かれて、うまく言葉にできない人
- 画像を扱う際、なぜその形式が使われているのか説明できない人
- 設計図やアイコン、ロゴを扱うことはあるが、画像形式の違いを体系的に習ったことがない人
どんな現場でも拡張子わからん問題は永遠にありますよね。文字だけの説明だと「圧縮」「劣化」と言われてもピンと来ないと思うので、この記事では実際に画像を生成して見た目の違いで比較していきます。IT業界の現場でよく使う形式に絞って解説します。
そもそも「圧縮」には2種類ある
画像形式の違いを理解する上で一番大事な前提がこれです。
- 可逆圧縮（ロスレス）：圧縮しても元のデータに戻せる。画質の劣化なし。
- 非可逆圧縮（ロッシー）：圧縮する代わりに一部のデータを間引く。元には戻せないが、ファイルサイズを大きく減らせる。
これを踏まえて、各形式を見ていきます。
JPEG：写真向き、圧縮すればするほど劣化する
- 非可逆圧縮（ロッシー）
- 透過（背景を透明にすること）には対応していない
- 圧縮率を自分で調整できる（品質を下げるほどファイルサイズは小さくなるが、画質も落ちる）
- 色の変化がなだらかな「写真」との相性が良い
同じ画像を品質（quality）を変えて保存し、文字部分を拡大して比較したのが下の画像です。
少しわかりにくいかもしれませんが、ご確認ください。
品質を下げるほど、輪郭ににじみが出て、最終的には ブロック状のノイズ（モザイクのような塊） が目立つようになります。これがいわゆる「JPEG特有の劣化」です。ファイルサイズも品質95で約227KB、品質5で約10KBと、20倍以上の差になります。
PNG：透過対応、劣化なし
- 可逆圧縮（ロスレス）
- 透過（アルファチャンネル）に対応：背景を透明にできる
- 圧縮してもJPEGのようなブロックノイズは出ない
- スクリーンショット、ロゴ、UIモックアップ、線がくっきりした画像に向く
透過対応かどうかの違いを、実際に画像を市松模様（透過を表す業界標準の背景）に重ねて比較しました。
PNGは背景が透明のまま別の背景と自然に合成できますが、JPEGは透過情報を持てないため、保存した時点で背景が白（または任意の色）で塗りつぶされてしまいます。ロゴ画像を配布するときにPNGが選ばれる理由はここにあります。
GIF：色数256限定、アニメーションが得意
- 可逆圧縮だが、使える色数が最大256色という大きな制限がある
- 簡易的な透過（1色のみを透明指定）に対応
- 複数フレームを持てるため、アニメーションGIFとして使われることが多い
- 写真のような色数の多い画像には不向き（グラデーションが縞模様になる）
同じグラデーションをフルカラーと、GIFで使われる限定色数で表示した比較です。
色数を絞ると、なめらかだったグラデーションに**縞模様（バンディング）**が出てきます。GIFが「ロゴのちょっとした動き」や「シンプルなアイコンアニメーション」には使われても、写真の保存にはほぼ使われない理由がこれです。
SVG：拡大しても劣化しないベクター画像
ここまでのJPEG/PNG/GIFは、すべてラスター画像（色のついた点＝ピクセルの集まりで絵を表現する方式）です。ラスター画像は拡大するとピクセルの粒が見えてきて、ギザギザ（ジャギー）になります。
一方SVGは、点の集まりではなく 「円を描け」「線を引け」という数式的な指示で絵を表現するベクター画像です。そのため、どれだけ拡大しても計算し直されるだけで、輪郭は常になめらかです。
- 拡大・縮小してもまったく劣化しない
- ファイルの中身はXML形式のテキストなので、軽量なことが多い
- ロゴ、アイコン、Webサイトの図解など「サイズが可変になる場面」に向く
- 写真のような複雑な色のグラデーションを表現するのは苦手（そもそも用途が違う）
小さいアイコン画像を無理やり拡大した場合と、同じ図形を最初からベクター的に描き直した場合の比較です。
ラスター画像を拡大すると輪郭がガタガタになりますが、ベクターであるSVGは常に滑らかな輪郭を保ちます。ロゴをどのサイズの端末でも綺麗に表示したいときにSVGが選ばれるのはこのためです。
（参考）WebPとBMPにも軽く触れておく
- WebP：Googleが開発した比較的新しい形式。JPEG並みの圧縮率を保ちながら、PNGのような透過やアニメーションにも対応できる「良いとこ取り」の形式。近年Webサイトでの採用が増えている。
- BMP：ほぼ無圧縮でOSレベルの標準形式として古くから存在するが、ファイルサイズが非常に大きくなるため、現在の現場ではあまり積極的には使われない。
現場での使い分け早見表
| 形式 | 圧縮方式 | 透過 | アニメーション | 得意なこと | 現場での代表的な用途 |
|---|---|---|---|---|---|
| JPEG | 非可逆 | 非対応 | 非対応 | 写真、色数の多い画像 | 資料に貼る実写の写真、サムネイル |
| PNG | 可逆 | 対応（アルファ） | 非対応 | 線画、文字、透過が必要な画像 | スクリーンショット、ロゴ、UI設計図 |
| GIF | 可逆（256色まで） | 簡易対応 | 対応 | 色数の少ない簡易アニメ | ローディング表示、簡単な動くアイコン |
| SVG | ベクター（数式） | 対応 | 対応（CSS/JSと組合せ） | 拡大縮小が発生する図形 | Webサイトのアイコン・ロゴ・図解 |
| WebP | 両対応 | 対応 | 対応 | JPEG/PNG/GIFの代替 | 近年のWebサイトの画像配信 |
実際に同じ画像（写真）をラスター4形式で保存して比べてみる
ここまで形式ごとに別々の画像で説明してきましたが、最後に同じ1枚の画像をPNG・JPEG・GIF・WebPそれぞれで保存し、「ファイルサイズ」と「同じ範囲を拡大したときの見え方」を横並びで比較してみます。理屈より、これが一番わかりやすいと思います。
元画像は800×600ピクセル、PNGでロスレス保存すると941.4KBになる画像です。これを条件を揃えて保存し直したときの参考例です。
- PNG（941.4KB）：元画像そのまま。劣化はないが、写真の場合はファイルサイズが一番大きくなりがち。
- JPEG q80（76.7KB）：PNGの8%程度のサイズまで圧縮。拡大しても実用上は気にならないレベル。
- GIF 256色（207.4KB）：色数を絞る都合上、写真のような多色画像では圧縮効率が悪く、JPEGよりファイルサイズが大きいのに画質はグラデーション部分で劣る、という「一番おいしくない」結果に。
- WebP q80（67.3KB）：今回の中では最小サイズ。JPEGとほぼ同等以上の画質を保ちながら、さらに小さく圧縮できている。
ちなみにこの比較にSVGは入れていません。SVGは「点の集まり」ではなく「図形を描く指示」でできているため、そもそも複雑な写真をSVG化するという発想自体が形式の使い道に合っていないからです。SVGが得意なのはアイコンやロゴのような「シンプルな図形」であって、この比較表に無理に押し込むと逆に誤解を招くと考え、あえて除外しました。
この結果から見えてくるのは、「PNGが一番安全」でも「JPEGが一番小さい」でもなく、用途に応じて明確に向き不向きがあるということです。特にGIFは、アニメーションという特殊用途がなければ、今は積極的に選ぶ理由がほとんどないというのが実際に数値を見た上での実感です。
まとめ
- 「なんとなく」で選んでいた拡張子にも、それぞれ明確な得意分野がある
- 写真ならJPEG、透過やスクショならPNG、簡易アニメならGIF、拡大縮小が必要な図形ならSVG
- 迷ったら「この画像は写真か、それとも図形か」「透過は必要か」「拡大されることがあるか」の3点で考えると選びやすくなります
普段何気なく使っている拡張子の裏側を知っておくと、資料作成やWeb制作で「なぜこの形式を選ぶべきか」を自信を持って説明できるようになります。