PNG vs JPG — いつどちらを使うか
PNGはくっきりしたエッジと透過を保持。JPGは少しのディテールを犠牲にして写真ファイルを大幅に小さくします。選びを間違えるとロゴがぼやけ、スクリーンショットが濁り、透過背景が黒い四角になります。このページでは、商品写真、UIキャプチャ、ステッカー画像など一般的な状況を正しい形式にマッピングし、フォームがJPGを要求するが背景のないアートワークの場合の対処も説明します。
クイック判断
写真、ポートレート、旅行、カメラ直出し感が欲しいもの → JPG（自分のサイトならWebPも）。
ロゴ、アイコン、UIスクリーンショット、透過ピクセルが必要なオーバーレイ → PNG（またはアルファ付きWebP）。
ポータルがJPGを要求するがファイルに透過がある → 先に背景色を足してから変換。PNG→JPGを直接期待して正しい塗りつぶしを推測させない。
PNGが活きる場面
PNGは典型的な用途で可逆 — フラットカラー、硬いエッジ、文字に適します。設定パネルのスクリーンショットは拡大しても読みやすいまま。
ステッカー、透かし、写真の上に浮くロゴにはアルファが重要 — JPGには「透ける」情報を保存する場所がありません。
トレードオフは写真コンテンツのサイズ。ビーチの夕日をPNGで保存すると、似た見た目のJPGより数倍大きくなることがよくあります。
JPGが向いている場面
非可逆圧縮は写真の連続トーン向け。メールクライアント、SNS、プリントキオスク、数え切れないほどのアップロードフォームがJPEGを標準にしています。
透過はありません。変換時に背景を選ばずアルファを平坦化すると、半透明ピクセルが濁ったグレーや真っ黒になる — ファイルのバグではなく形式の制限です。
JPGは後から何度も編集するデザイン作業のアーカイブ形式としても弱い。ピクセルが往復を耐えるならPNG、TIFF、ネイティブデザインソースを保持。
透過PNG→JPG：書き出し前に塗りつぶす
JPEG仕様にアルファチャンネルはありません。透過ピクセルはすべて不透明色になる — 白は書類向けの一般的デフォルト、スライド上の明るいロゴにはダークグレーやブランドネイビー。
透過PNG→JPGで塗りつぶしを明示的に選び、自動変換に任せない。
書き出し後に縁がグレーに見える場合、PNGにソフトシャドウやアンチエイリアスハローがあったか確認 — デザインアプリからよりフラットな書き出しやタイトな切り抜きの方が早いことも。
WebPの位置づけ（基本を置き換えない）
自分で管理するサイトでは、WebPが「小さな写真」と「透過アイコン」の両方を1形式でカバーすることが多い。その世界ならWebP vs AVIF vs JPGを参照。
PNG圧縮フローはWebPを推奨 — ブラウザでPNG再保存してもバイトが減りにくく、形式変更の方が効くからです。
PNG vs JPG の質問
- PNGは常に大きいファイル？
- 写真ではほぼ常に。色数の少ないシンプルなフラットアイコンでは、PNGの方が小さくシャープなことも — 書き出しバイトサイズを必ず確認。
- JPG→PNGで失われたディテールを取り戻せる？
- いいえ。PNGはコンテナを変えるだけ。JPGのぼけと圧縮ブロックはそのまま。非圧縮オリジナルが必要。
- チャット用スクリーンショット — PNGかJPG？
- 小さな文字を読む必要があるならPNG。プラットフォームが再圧縮しアップロード制限と戦うならJPGまたはWebP — 送信前にプレビュー。
- 印刷店はJPGのみ
- 彼らの仕様に従う。透過デザインは先に透過PNG→JPG。色が重要ならPDFやTIFFを受け付けるか確認。
- 同じプロジェクトで両方使う？
- はい — 写真はJPG、UIとロゴはPNGが普通。サイト全体で1拡張子に統一するより、各アセットに形式を合わせる。