はじめに
Webサイトのパフォーマンス改善（LCP対策など）で必ず直面するのが「画像の軽量化」です。
「写真はJPEG、ロゴはSVG、最近はWebPがいいらしい」といった定石はあっても、「なぜWebPはこれほど軽いのか？」「内部でどんな計算（予測）をしているのか？」まで説明できるでしょうか。
この記事では、基本の3大フォーマット（JPEG, PNG, SVG）の正体を整理した上で、Googleが生んだWebPの「予測符号化」の凄さを、実際に検証した結果を交えて解説します。
1. 基本の3大フォーマット：名前の由来と役割
まずは、私たちが日々扱っている「基本の3人」を改めて整理しましょう。
JPEG（ジェイペグ）：写真の専門家
- 正式名称： Joint Photographic Experts Group（写真の専門家グループ）
- 特徴： 人間の目が「細かい色の変化には鈍感」であることを利用し、目立たないデータを間引いて保存する「非可逆圧縮」の代表格です。
-
💡 豆知識：
.jpegと.jpgは中身は全く同じものです。昔のOSの拡張子3文字制限の名残です。
PNG（ピング）：Webの職人
- 正式名称： Portable Network Graphics（持ち運び可能なネットワーク画像）
- 特徴： データを一切捨てない「可逆圧縮」。背景透過が可能で、何度保存しても劣化しないため、ロゴやスクショ、図解に最適です。
SVG（エスブイジー）：数学的な異端児
- 正式名称： Scalable Vector Graphics（拡大可能なベクター画像）
- 特徴： ドットの集まりではなく、「ここに円を描け」というテキストベースの命令（コード）です。無限に拡大してもガビガビにならず、React等でコンポーネント化してCSSで操作できるのが最強の強みです。
2. WebP（ウェッピー）の凄さ：「予測」でデータを削る
WebPがJPEGやPNGより圧倒的に軽い理由は、動画技術から転生した「予測符号化（Predictive Coding）」にあります。
なぜ「推測」すると軽くなるのか？
WebPは画像を小さなブロックでスキャンし、「隣のドットが青なら、次も青だろう」と、すでに処理した周囲のピクセルから次の色を予測します。
そして、ここがポイントですが、WebPは「予測した色」を保存するわけではありません。
保存するのは、「予測と、実際の色の『ズレ（差分）』だけ」です。
- 予測が的中した場合：差分は「0」になります。「0」というデータは極限まで短く圧縮できます。
- 予測が外れた場合： ズレた分の「小さな数字」だけを記録します。
大きな数字（色の生データ）を保存するより、0に近い小さな数字（差分）を保存する方が、圧倒的にビット数を節約できる。これがWebPが爆速な理由です。
3. 実証：WebPの実力をSquooshで検証してみた
Googleが提供する比較ツール「Squoosh」を使って、風景写真（JPEG）をWebPに変換してみました。
最初はQualityを0にして、94％圧縮。これは目で見てもかなり粗い。
Qualityを50にして、50％圧縮。これは遠目には差分がわからない。十分利用できる。拡大した時に粗さが理解できる程度
検証結果
- オリジナル（JPEG）： 44.9 kB
- 変換後（WebP）： 22.0 kB（51%削減！）
驚くべきは、ファイルサイズが半分以下になったにもかかわらず、肉眼では劣化がほぼ判別できない点です。Quality（画質）を50程度まで下げても、WebPの予測ロジックが優秀なため、空のグラデーションなども非常に滑らかに保たれています。
謎の項目「Effort」の正体
設定項目にある「Effort（努力量）」は、「出力する側がどれだけ必死に予測パターンを総当たりするか」という数値です。
- 値を大きくすると、書き出しに時間はかかりますが、より最適な予測パターンを見つけ出し、コンマ数KB単位でファイルを絞り込んでくれます。
- ユーザー側（ブラウザ）の表示負荷は変わらないため、配信用の画像なら最大値（6）で書き出すのがエンジニア的に正解です。
【まとめ】使い分けチートシート
| 形式 | 圧縮方式 | 透過 | 用途 |
|---|---|---|---|
| JPEG | 非可逆 | × | ユーザー投稿写真など（レガシー対応） |
| PNG | 可逆 | 〇 | ロゴ、図解、劣化させたくないUI素材 |
| SVG | コード | 〇 | アイコン、ロゴ（無限拡大・CSS操作） |
| WebP | 両方可 | 〇 | Web配信のデフォルト（迷ったらこれ） |
| AVIF | 次世代 | 〇 | さらに軽量化を極めたい時（LCP改善の切り札） |
おわりに
画像の拡張子は、ただのアルファベットではなく「いかに賢くサボって（予測して）データを削るか」という技術の結晶です。
仕組みを理解して使い分けることで、ユーザーのデータ通信量を守り、最高のサイトパフォーマンスを提供していきましょう！