PNGとJPGのどちらを選ぶかは、オンラインで画像を扱う際によくある疑問です。答えは、扱う画像の種類と目的によって完全に変わります。知っておくべきことをまとめました。
核心的な違い:非可逆圧縮と可逆圧縮
JPGとPNGの根本的な違いは、画像データの圧縮方法にあります。
JPG(JPEG)は非可逆圧縮です。 JPGを保存すると、エンコーダーが画像を解析し、人の目では気づきにくい細部を削除します。カラーグラデーションや、複雑な部分の高周波テクスチャなどです。これにより非常に小さいファイルになりますが、削除された情報は永久に失われます。JPGを編集して再保存するたびに、さらに詳細が失われていきます。
PNGは可逆圧縮です。 PNGは元のデータを完全に復元できる圧縮アルゴリズム(Deflate)を使い、すべてのピクセルをそのまま保存します。ファイルを何度保存しても情報は失われません。そのため、同じ画像でもPNGファイルはJPGよりかなり大きくなります。
JPGを使うべき場合
JPGは写真や連続的な色のグラデーションを含む画像に適しています。
- ポートレートや風景写真
- 商品写真
- ソーシャルメディア用画像やブログ記事のヘッダー
- ピクセル単位の正確さよりファイルサイズが重要な画像
5MBのRAW写真を品質80のJPGで保存すると、300〜500KBになることがあります。同じ画像をPNGで保存すると8〜15MBになる場合があります。Web用途では、この差がページの読み込み速度に直接影響します。
PNGを使うべき場合
PNGはグラフィック、UI要素、透明背景が必要なものに適した選択です。
- ロゴやワードマーク
- アイコンやUIグラフィック
- テキストを含むスクリーンショット
- 単色やパレットが限られた画像
- 透明な背景が必要な画像
JPGは透明度を一切サポートしていません。色付きの背景にPNGロゴを配置する必要がある場合、JPGでは代用できません。PNG(またはベクターロゴならSVG)を使う必要があります。
ファイルサイズの比較
写真とグラフィックを比較した実例を紹介します。
写真(複雑で色数が多い):
- PNG:約4.2MB
- JPG(品質80):約420KB — 10倍小さい
- JPG(品質60):約220KB — 19倍小さい
ロゴ(単色、透明度あり):
- 透明度ありのPNG:約48KB
- JPG(透明度なし):約180KB — むしろ大きく、品質も劣る
- SVG:約4KB(ベクターロゴの場合、SVGはどちらより優れています)
透明度の問題
多くの場面でこれが決定的な要因になります。JPGは透明な背景を持てません。 透明度のあるPNGをJPGとして保存すると、透明な部分は白(または他の単色)になります。
透明な画像が必要なワークフロー、例えば商品の切り出し、異なる背景に重ねるロゴ、UIオーバーレイなどでは、PNG、WebP、GIFを使う必要があります(GIFは1ビットの透明度しかサポートしていません)。
JPGのアーティファクトとPNGのシャープさ
JPG圧縮は画像を8×8ピクセルのブロックに分割し、各ブロック内の高周波な detail を削除する仕組みです。高品質設定(85以上)ではほとんど見えません。低品質設定(60未満)ではJPEGアーティファクトが現れます。ブロック状のパターン、エッジ周辺のリンギング、色のバンディングなどです。
PNGはデータをそのまま保存するため、こうしたアーティファクトは発生しません。そのため、シャープなエッジが重要なスクリーンショット、図表、テキストの多いグラフィックにはPNGが適した選択です。
現代的な選択肢:WebP
Web上に画像を公開するなら、WebPはどちらの用途にも検討する価値があります。特徴は以下の通りです。
- 写真においてJPGを上回る性能(同じ品質で約30%小さい)
- 可逆圧縮(PNGと同様)と透明度をサポート
- すべての主要なモダンブラウザ(Chrome、Safari、Firefox、Edge)でサポートされている
画像はPNGからWebPやImage Converterツールで変換できます。
クイック判断ガイド
| 状況 | 使用形式 |
|---|---|
| Web用の写真 | JPG(またはWebP) |
| 透明背景のロゴ | PNG(またはSVG) |
| テキスト付きスクリーンショット | PNG |
| Eコマース用の商品写真 | JPG(またはWebP) |
| ソーシャルメディアの投稿 | JPG |
| アイコンやUI要素 | PNG(またはSVG) |
| 何度も編集する画像 | PNG(マスターファイル)→JPGで書き出し |
両方に対応する最適なワークフロー
多くのプロは、編集を続けるためのPNGマスターファイル(可逆圧縮で品質が劣化しない)を保持し、ファイルサイズが重要な最終用途にはJPGとして書き出します。この方法なら、編集中はPNGの正確さを、配信時にはJPGのコンパクトさを両方活かせます。
Image Converterを使えば形式間の変換をすぐに行えます。詳しい技術的な違いについてはPNG対JPG比較ガイドをご確認ください。
よくある質問
- PNGはJPGより優れていますか？
- どちらが常に優れているということはなく、それぞれ用途が異なります。PNGは、グラフィック、ロゴ、スクリーンショットのほか、透明な背景やくっきりした文字の輪郭が必要な画像に適しています。JPGは、目に見える画質の低下を最小限に抑えながらファイルサイズを大幅に小さくできるため、写真に適しています。
- JPGをPNGに変換すると画質は向上しますか？
- いいえ。JPGをPNGに変換しても、元のJPG圧縮で失われた画質は戻りません。変換後はPNGが画像を可逆的に保存するため、それ以上の劣化は防げますが、すでに失われたディテールを復元することはできません。
- PNGのファイルサイズがJPGよりはるかに大きいのはなぜですか？
- PNGは可逆圧縮を採用しており、すべてのピクセルを正確に保存します。一方、JPGは非可逆圧縮を採用しており、細かなディテールを切り捨てることでファイルサイズを大幅に小さくします。写真をPNGで保存すると、同じ画像を品質80のJPGで保存した場合の5～10倍のサイズになることがあります。
- ロゴにはどちらの形式が適していますか？
- ロゴにはPNGが断然おすすめです。ロゴは一般的にフラットな色やくっきりした輪郭を持ち、透明な背景を必要とすることも多いですが、PNGはこれらすべてに完璧に対応できます。JPGでは輪郭の周りにノイズ（アーティファクト）が発生し、透過にも対応していません。
- ウェブサイトにはPNGとJPGのどちらを使うべきですか？
- 写真や複雑な画像にはJPGを、ロゴ・アイコン・イラストにはPNGを使用してください。また、WebPはどちらよりもファイルサイズの面で優れているため、両方の用途で検討する価値があります。最高のパフォーマンスを得るには、目に見える画質の低下なしにファイルサイズを最も小さくできる形式を選びましょう。