スクリーンショットを PNG で保存したら 3MB になった。同じ画像を JPG で保存すると 200KB なのに、見た目はほぼ同じ——そんな経験はありませんか？あるいは、サイトが「JPG のみ」と指定しているのに、アイコンの透過背景を保持するためには PNG でないといけない、という状況も。画像フォーマットの選択は単なる慣習ではなく、明確な理由があります。本記事では圧縮の仕組みを起点に、JPG・PNG・WebP・GIF・SVG の違いと、場面ごとの最適な選び方をまとめて解説します。
1. フォーマットの核心：圧縮方式の違い
すべての画像フォーマットの本質的な違いは、ピクセル情報をどのように保存するか——つまり圧縮方式にあります。大きく分けて 2 種類です。
1.1 非可逆圧縮（Lossy Compression）
人間の目で気づきにくい細部を捨てることでファイルサイズを大幅に削減します。JPG がその代表例です。圧縮率は高くできますが、一度保存すると元のデータを完全に復元することはできません。編集→保存を繰り返すたびに画質が累積的に劣化します（「世代劣化」と呼ばれます）。
1.2 可逆圧縮（Lossless Compression）
すべてのピクセル情報を完全に保持したまま圧縮します。解凍すれば元の画像に完全に復元できます。PNG がこの方式を採用しています。ファイルは非可逆形式より大きくなりますが、何度編集・保存しても画質は変わりません。
写真を JPG で保存すれば、目で見てほぼ差がないまま容量を 1/10 にできます。アイコンを PNG で保存すれば、透過背景を保ったまま縁のシャープさを維持できます。問題は圧縮そのものではなく、コンテンツに合わないフォーマットを選ぶことにあります。
2. 主要フォーマット別解説
2.1 JPG / JPEG
正式名称：Joint Photographic Experts Group（1992年）
圧縮方式：非可逆
透過：非対応
アニメーション：非対応
JPG は世界で最も普及した写真フォーマットで、「連続階調」（なめらかなグラデーションを持つ写真）向けに最適化されています。5MB のデジカメ写真でも、品質 80% の JPG で保存すれば 300～600KB 程度になり、肉眼ではほとんど差がわかりません。
向いている用途：写真、SNS 投稿画像、背景画像、色彩豊かなコンテンツ
向いていない用途：透過背景が必要なアイコン、テキストのスクリーンショット（圧縮でエッジがぼける）、繰り返し編集する作業ファイル
2.2 PNG
正式名称：Portable Network Graphics（1996年）
圧縮方式：可逆
透過：対応（アルファチャンネル、最大 256 段階の透明度）
アニメーション：非対応（APNG 拡張は対応）
PNG は初期の GIF を置き換えるために設計されました。透過背景やピクセル精度が必要な場面の定番です。Web 上のロゴ・アイコン・ボタン画像のほとんどが PNG です。
デメリットは写真への圧縮効率の低さ——同じ写真を PNG で保存すると JPG の 5〜10 倍になることもあります。可逆圧縮がすべてのカラー値を正確に保存しなければならないためです。
向いている用途：アイコン、ロゴ、スクリーンショット、透過背景素材、テキスト画像、図解
向いていない用途：写真（容量が無駄に大きくなる）、帯域幅を最小化したい場面
2.3 WebP
開発：Google（2010年）
圧縮方式：非可逆・可逆の両方に対応
透過：対応
アニメーション：対応
WebP は「JPG より小さく、PNG より柔軟」を目標に Google が開発した現代的フォーマットです。同画質の JPG と比べ 25〜35% 小さく、PNG 相当の無損失モードでも PNG より約 26% 小さくなります。Chrome・Firefox・Safari・Edge など主要ブラウザはすべて対応済みです。
向いている用途：Web 画像配信全般、透過とアニメーションを両立したい場面
向いていない用途：旧環境との互換性が必要なケース（iOS 14 未満は非対応）、Photoshop などの従来ソフトを使う編集ワークフロー
2.4 GIF
正式名称：Graphics Interchange Format（1987年）
圧縮方式：可逆（ただし 256 色制限あり）
透過：部分対応（完全透明か完全不透明のみ、半透明は非対応）
アニメーション：対応（GIF が今も使われる主な理由）
256 色制限のせいで写真の表現には不向きで、色数の多い画像は大きな色むらが生じます。それでも SNS での短いループアニメーション文化に深く根付いているため生き残っています。技術的には WebP アニメーションや APNG が優れていますが、エコシステムの慣性が GIF を存続させています。
向いている用途：シンプルなループアニメ、SNS のリアクション GIF
向いていない用途：写真、256 色を超えるカラーの画像、半透明が必要な表現
2.5 SVG
正式名称：Scalable Vector Graphics（1999年）
種別：ベクター（ラスターではない）
透過：対応
アニメーション：対応（CSS または SMIL）
SVG は他のフォーマットと本質的に異なります。ピクセルを記録するのではなく、図形・パス・色を数式で記述します。そのため無限に拡大しても劣化せず、アイコンやロゴのファイルサイズは数 KB に収まることがほとんどです。写真などの複雑なビットマップ画像には向きません。
向いている用途：アイコン、ロゴ、イラスト、インフォグラフィック、サイズを問わず使いたいグラフィック
向いていない用途：写真、ラスタースタイルのアートワーク
3. フォーマット比較一覧
| フォーマット | 圧縮 | 透過 | アニメーション | 最適な用途 |
|---|---|---|---|---|
| JPG | 非可逆 | なし | なし | 写真・色彩豊かな画像 |
| PNG | 可逆 | あり | なし | アイコン・スクリーンショット・透過 |
| WebP | 両対応 | あり | あり | Web配信（現代ブラウザ向け） |
| GIF | 可逆（256色） | 部分 | あり | シンプルなループアニメ |
| SVG | ベクター | あり | あり | アイコン・ロゴ・イラスト |
4. 用途別の選択ガイド
4.1 SNS への投稿画像
JPG を使いましょう。SNS プラットフォーム（Instagram、X など）はアップロード時に独自の圧縮をかけるため、PNG で大きなファイルをアップすると二重圧縮による劣化が起きやすくなります。品質 80〜90% の JPG でのアップロードがベストです。
4.2 Web サイトのロゴ・アイコン
ベクターならSVG、ラスターなら PNG。いずれも透過に対応しており、SVG は任意のサイズに拡大しても劣化しません。
4.3 Web ページ内の画像（読み込み速度最適化）
WebP を使い、HTML の <picture> タグで JPG または PNG をフォールバックとして指定しましょう。現代ブラウザは WebP をネイティブサポートし、旧ブラウザは自動的にフォールバックを使用します。
4.4 スクリーンショットやテキスト画像
PNG を使いましょう。テキストのエッジがシャープに保たれます。非可逆圧縮はコントラストの高い境界線（テキストなど）に圧縮アーティファクトを生じさせます。
4.5 ループアニメーション
プラットフォームによります。多くの SNS は GIF を受け付けています。選択肢があるなら、WebP アニメーションの方がファイルサイズが小さく画質も優れています。
5. よくある質問
JPG で保存すると画質が下がるが、元に戻せる？
戻せません。非可逆圧縮は不可逆であり、捨てられたデータは復元できません。写真編集では RAW や PSD などの元データを常に保管し、最終出力時だけ JPG へエクスポートするのが基本です。
なぜ同じ画像なのに PNG は JPG よりずっと大きいのか？
写真は無数の微妙な色の変化を含んでおり、JPG の非可逆圧縮アルゴリズムはまさにこのような画像に最も効果を発揮します。PNG の可逆圧縮はすべてのピクセル値を正確に記録しなければならないため、写真コンテンツに対する圧縮率は非常に低くなります。
オンライン画像ツールでフォーマットを変換できる？
できます。現代のブラウザ型画像ツールは JPG・PNG・WebP などの相互変換に対応しており、処理はすべてブラウザ内で完結します。ファイルをサーバーへ送信せずに変換できるので、プライバシーの面でも安心です。
6. まとめ
フォーマット選択のロジックはシンプルです：
- 写真 → JPG（ファイルが小さく、画質は実用上十分）
- アイコン・スクリーンショット・透過 → PNG（可逆、精細）
- Web 配信 → WebP（両者の利点を兼ね備えた現代の標準）
- ベクターグラフィック → SVG（無限スケール、最小のアイコン形式）
- ループアニメ → GIF または WebP アニメーション（プラットフォームの対応状況次第）
次に画像を保存するときは、「これは写真かグラフィックか」「透過が必要か」「Web ページで速く読み込む必要があるか」を考えてみてください。その答えが、最適なフォーマットを自然と示してくれます。