はじめに
Webフロントエンド開発で必ず扱う画像の拡張子（フォーマット）。
「写真はJPEG、透過したいならPNG」という表面的なルールは知っていても、そもそもこれらが何の略で、どのような仕組みでデータを保存しているのか、説明できるでしょうか？
画像の拡張子は、ただのアルファベットの羅列ではありません。名前の由来や「データの持ち方」を知ることで、ReactやNext.jsなどでの画像最適化への解像度が劇的に上がります。
この記事では、基本の3大フォーマット（JPEG, PNG, SVG）を中心に、それぞれの正体と使い分けを丁寧に解説します。
1. JPEG（ジェイペグ）：写真のプロ達が作った「高効率な圧縮技術」
正式名称：Joint Photographic Experts Group
（ジョイント・フォトグラフィック・エクスパーツ・グループ）
直訳すると「写真の専門家グループ」です。デジタルの写真をいかに綺麗に、かつデータ容量を軽く保存するかという目的で、専門家たちによって策定された規格です。
💡 補足：「.jpeg」と「.jpg」の違いは？
結論から言うと、中身は全く同じものです。昔のWindows（MS-DOS）のシステムでは「ファイルの拡張子は3文字まで」という制限があったため、.jpegを.jpgと省略して使っていた名残であり、現在でも両方が同じ意味として使われています。
仕組み：人間の視覚特性を利用した「非可逆圧縮」
JPEGの最大の特徴は、人間の目が「明るさの変化には敏感だが、細かい色の違いには鈍感である」という特性をうまく利用している点です。
たとえば「少し薄い水色、普通の水色、少し濃い水色」というデータが並んでいた時、JPEGは「人間の目にはほぼ同じ色に見えるから、まとめて1つの『水色』として記録しよう」と、目立たないデータを間引いて（捨てて）記録します。
- 得意なこと： 風景や人物など、何百万色も使われている「写真」を、人間の目には綺麗に見える状態を保ったまま、ファイルサイズを劇的に軽くすること。
- 苦手なこと： 背景を透明にする「透過」ができません。また、イラストや文字のような「くっきりした境界線」のデータまで間引こうとしてしまうため、文字の周りにモヤモヤとした汚れ（モスキートノイズ）が出やすくなります。
- 注意点： データを捨てて軽くする方式（非可逆圧縮）のため、一度保存すると元の完全なデータには戻りません。上書き保存を繰り返すたびに画質が劣化していく点に注意が必要です。
2. PNG（ピング）：Webのために生まれた「透過と劣化なしの職人」
正式名称：Portable Network Graphics
（ポータブル・ネットワーク・グラフィックス）
直訳すると「持ち運び可能な、ネットワーク用の画像」です。
昔のWebでは「GIF（ジフ）」という形式が主流でしたが、特許問題で使いづらくなった背景があり、「特許フリーで、Web（ネットワーク）で綺麗に表示できる標準形式を作ろう」と新しく生み出されたのがPNGです。
仕組み：データを一切捨てない「可逆圧縮」
JPEGがデータを間引くのに対し、PNGはデータを1ミリも捨てません。
たとえば 白白白白白黒黒白白白 という画像データを、馬鹿正直に記録するのではなく 5白2黒3白 のように、規則性を見つけて効率よくルール化して保存します。
- 得意なこと： 「透過（透明化）」が可能です。データを捨てないため、ロゴ、アイコン、スクリーンショットなどを何度保存し直しても絶対に劣化しません。
- 苦手なこと： 写真のように「ドット1つ1つが全部微妙に違う色」の画像を保存すると、効率化のルールが通用せず、全データを真面目に記録してしまいます。結果としてファイルサイズが極端に大きくなり、Webの読み込み速度を低下させる原因になります。
3. SVG（エスブイジー）：「ドット」を持たない数学的な異端児
正式名称：Scalable Vector Graphics
（スケーラブル・ベクター・グラフィックス）
- Scalable（スケーラブル）： 拡大・縮小が自由にできる
- Vector（ベクター）： 向きと大きさを持つ数学的なデータ
これまでのJPEGやPNGは「色のついた小さなタイル（ピクセル）を敷き詰めたモザイクアート（ラスター画像）」でしたが、SVGは根本的に仕組みが異なります。
仕組み：ドットではなく「プログラム（コード）」
SVGの正体は、画像ではなく**「図形を描くためのテキストコード（XML）」**です。
エディタでファイルを開くと、以下のようなコードが出てきます。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
- 得意なこと： ドットが存在しないため、スマホの画面から巨大なモニターまで拡大しても、絶対に境界線が粗くなりません（常に滑らかです）。 中身がテキストなので非常に軽く、React等のコンポーネントとして扱い、CSSやJavaScriptで動的に色や形を操作できるのが最大の強みです。
- 苦手なこと： 写真などの複雑な風景には適していません（計算するためのコードが膨大になり、ブラウザの描画負荷が高くなります）。企業のロゴや、UIのアイコン等に特化しています。
現代の進化系：WebPとAVIF
基本の3つを理解すると、近年普及している拡張子が「なぜ生まれたのか」がわかります。
WebP（ウェッピー）：Googleが生んだオールラウンダー
- 「写真はJPEG、透過はPNG」という使い分けの煩雑さを解決するために開発された、JPEGの軽さとPNGの透過性を併せ持つフォーマットです。
- 現在のWeb開発のデファクトスタンダード（事実上の標準）であり、パフォーマンス改善の第一歩として広く利用されています。
AVIF（エーブイアイエフ）：動画技術から来た次世代エース
- NetflixやYouTubeの「高画質動画の圧縮技術」を静止画に応用した次世代フォーマットです。
- WebPよりもさらにファイルサイズを小さく抑えることができ、LCP（ページの最大コンテンツの描画時間）を極限まで改善したい最先端の現場で導入が進んでいます。
【保存版】フロントエンド向け 使い分けチートシート
最後に、開発現場で迷った時のための早見表です。
| フォーマット | 正体・得意なこと | 透過 | 画質劣化 | フロントエンドでの主な用途 |
|---|---|---|---|---|
| JPEG | 写真専門。色は綺麗だが境界線の粗が出やすい | × | あり | ユーザー投稿の写真、背景用の大きな風景画像 |
| PNG | Web標準。絶対に劣化させたくない時 | 〇 | なし | 記事のスクショ、文字を含むアーキテクチャ図 |
| SVG | 数式コード。無限に拡大・操作可能 | 〇 | なし | ヘッダーロゴ、UIアイコン（Reactでコンポーネント化） |
| WebP | 現代の標準。軽くて透過もできる | 〇 | 選択可 | アプリ内の画像全般（現代のデフォルト設定） |
| AVIF | 次世代の標準。WebPよりさらに圧倒的に軽い | 〇 | 選択可 | 表示パフォーマンスを極限まで追求したい時 |
おわりに
画像の拡張子は、ただのアルファベットではなく「その形式が何のために生まれ、どうやってデータを保存しているのか」という明確な役割を持っています。
名前の由来と仕組みを知ることで、「なぜロゴはSVGが良いのか」「なぜスクショをJPEGにすると文字が滲むのか」が論理的に腹落ちするはずです。明日のフロントエンド開発や、適切なフォーマット選びの参考にしてみてください！