PNGとJPGの比較：いつ、どちらを使うべきか？（具体例付き）
根本的な違い：各フォーマットの圧縮方法
PNGとJPGは互換性がありません。それぞれ別の問題を解決するためのものです。JPG（またはJPEG）は非可逆圧縮を利用しており、これはピクセルデータを永久に破棄することでファイルサイズを縮小します。JPGを保存するたびに、アルゴリズムが似た色のピクセルを探し、グループ化して平均化します。これによりファイルは小さくなりますが、圧縮しすぎると目に見えるアーティファクトが発生するリスクがあります。Photoshopでは、画質設定80（ファイル > 書き出し > Web用に保存）で、写真の場合、見た目の劣化をほとんど感じさせずに60〜70%のサイズ削減が可能です。しかし、画質を40まで下げると、特に背景上のテキストのようなコントラストの高い部分の周りに、マクロブロッキングと呼ばれるブロック状のノイズが見えるようになります。 PNGはその逆で、可逆圧縮を使います。すべてのピクセルが、元のまま完全に保存されます。DEFLATE圧縮アルゴリズムは、データ内の繰り返しパターンを見つけ、何も破棄せずに効率的に保存するだけです。PNGを開いて保存し、また開いても、ピクセルは全く同じです。このため、完璧な忠実度が譲れない場合には、PNGが唯一の選択肢となります。 これが実際どういうことかというと、4000×3000ピクセルの山の風景写真は、高品質なJPGなら3〜5MBになるかもしれません。同じ画像をPNGにすると、25〜40MBに膨れ上がることがあります。写真の場合、この余分なサイズは、見た目の上ではほとんどメリットがありません。しかし、1200×800ピクセルのスプレッドシートのスクリーンショットを考えてみてください。JPGだと、画質75でさえテキストはにじみ、セルの境界線周りには色のフリンジが見えるでしょう。PNGなら、完全にシャープなままで、ファイルサイズはわずか300〜500KB程度かもしれません。フォーマットの選択は、単なる習慣ではなく、常にコンテンツに基づいて意図的に行うべきです。
JPGが適切な場合
JPGは写真のために作られたもので、今でもそれがJPGの得意分野です。このフォーマットの非可逆圧縮は、人間の視覚の特性を巧みに利用しています。私たちの目は、色の微妙な変化よりも、明るさの変化にはるかに敏感なのです。写真には、濃い青から淡い青へと変わる空や、柔らかな光の中で変化する肌の色合いなど、段階的な色調の変化が満ちています。JPGはこれらの領域を積極的に圧縮しますが、ほとんどの場合、私たちはそれに気づきさえしません。 以下のような場合にはJPGを選びましょう： **ウェブ用のカメラ写真。** ECサイトの商品写真、ブログのメイン画像、Instagramの旅行写真などを考えてみてください。画質設定75〜85で、一般的なデジタル一眼レフの写真は、通常の画面サイズではオリジナルと見分けがつかないまま500KB未満に縮小されます。 **ファイルサイズが最優先されるあらゆる画像。** これには、メールの添付ファイル、配布用PDFに埋め込まれた画像、サムネイルなどが含まれます。GoogleのPageSpeedガイドラインでは、可能であれば画像を200KB未満に保つことを推奨しています。写真の場合、JPGが最も手早くその目標を達成する方法です。 **本当に最終版となる画像。** JPGの圧縮は非可逆なので、保存するたびにファイルは劣化します。画像を繰り返し編集している場合、JPGで何度も再保存するのはトラブルを招くだけです。マスターファイルは可逆フォーマット（PNG、TIFF、またはカメラのRAWフォーマットなど）で保持し、JPGへの書き出しは絶対的な最終ステップとしてのみ行いましょう。 JPGの大きな、そして譲れない制限は透明度です。JPGは透明度をサポートしていません。異なる色の背景に商品写真を配置する必要がある場合、JPGは使えません。PNGかWebPを使用する必要があります。
PNGが適切な場合
PNGは、その可逆圧縮と完全な透明度のサポートのおかげで、JPGが苦手とする分野でまさに輝きを放ちます。 **スクリーンショットや、静止画として書き出した画面録画。** チュートリアルのスクリーンショットでぼやけたテキストを読もうとしたことがある人なら誰でも、間違った用途でJPGを使ったときの苦痛を知っているでしょう。画面上のテキストはコントラストが高く、エッジがシャープです。JPGの圧縮はこれを台無しにし、高い画質設定でさえ色のにじみやぼやけを生じさせます。コードエディタ、UIのモックアップ、財務ダッシュボードなどのスクリーンショットは、必ずPNGでなければなりません。 **単色で構成されるロゴ、アイコン、イラスト。** 異なる色の背景の上に配置する必要がある会社のロゴがある場合、透明なPNGが必要です。Illustratorからベクターイラストを書き出す場合（ファイル > 書き出し > Web用に保存 > PNG）、すべてのくっきりとした線が保持されます。同じものをJPGとして書き出すと、白い背景が強制され、エッジがぼやけてしまいます。 **さらなる編集が予定されている画像。** 合成、マスキング、調整が必要なデザイナーにファイルを渡す場合は、PNGを送りましょう。その可逆性により、異なるプログラム間でファイルを開いたり保存したりしても品質が失われることはありません。 **単色の領域が広い画像。** インフォグラフィック、チャート、図はPNGに最適です。DEFLATE圧縮アルゴリズムは、単一色の大きな繰り返しブロックを処理するのが非常に効率的です。このような場合、PNGはJPGよりもファイルサイズが小さくなることさえあり、見た目は無限に優れています。 では、PNGの欠点は何でしょうか？それはファイルサイズですが、写真のようなコンテンツに限られます。詳細な写真の24ビットPNGは、見た目の品質に違いがないにもかかわらず、良質なJPGよりもほとんどの場合、はるかに大きくなります。写真の場合、その余分なサイズに見合う価値はめったにありません。
実際の数値での比較例
抽象的な比較もいいですが、数字を見るとトレードオフが現実味を帯びてきます。実際のファイルサイズを含む3つの具体例を見てみましょう。 **例1：商品写真（2400×1600 px、ランニングシューズのカメラ写真）** - JPG 画質85：487 KB — クリーンで、目に見えるアーティファクトなし - JPG 画質60：198 KB — 質感にわずかな甘さがあるが、サムネイルとしては問題なし - PNG (24-bit)：6.2 MB — オリジナルと同一だが、画質85のJPGの12倍の大きさ 結論：JPGの圧勝です。PNGには視覚的な利点がなく、ページの読み込み時間にとっては致命的でしょう。 **例2：UIスクリーンショット（1440×900 px、テキストの多いウェブページを表示したブラウザ）** - JPG 画質85：312 KB — 黒いテキストの周り、特に小さいフォントで顕著な色のにじみ - JPG 画質95：890 KB — にじみは軽減されるが、12pxの本文テキストではまだ見える - PNG (24-bit)：418 KB — 完全にシャープなテキスト、アーティファクトゼロ 結論：PNGが明らかに優れています。最高品質のJPGよりも実際にはファイルサイズが小さく、見た目ははるかに優れています。 **例3：会社のロゴ（800×400 px、透明な背景を持つフラットデザイン）** - JPG 画質90：45 KB — 白い背景が強制され、透明度なし。エッジは甘い - PNG (24-bit with alpha)：38 KB — 完璧な透明度、くっきりしたエッジ 結論：比べるまでもありません。PNGの方がファイルサイズが小さく、JPGは透明度をサポートしていないため、この仕事をこなせる唯一のフォーマットです。 これらの数値は画像の内容によって異なりますが、ここで見られるパターンは、何千もの実世界のファイルに当てはまります。
PNGとJPG間の変換：何が起こるのか
よくある誤解を解いておきましょう。JPGをPNGに変換しても、失われたデータが魔法のように回復することはありません。写真が画質70のJPGとして保存された場合、そのデータは永久に失われます。そのファイルをPNGに変換しても、すでに損傷した画像の完璧なロスレスコピーが得られるだけです。アーティファクトを削除したのではなく、保存したことになります。ファイルははるかに大きくなりますが、品質は全く向上しません。 しかし、PNGからJPGへの変換は、写真を編集段階からウェブでの最終的な公開へと移行する際によく行われる、便利なステップです。ここで初めてJPG圧縮を適用し、最終的な品質をコントロールすることができます。例えば、CocoConvertのPNGからJPGへの変換ツールでは、1から100までの品質レベルを選択できます。ほとんどの写真では、品質82が良い出発点だと感じています。 では、JPGをPNGに変換するのはどんな時でしょうか？まれですが、シナリオはあります。既存の写真に透明な背景を追加する必要がある場合（ただし、マスキング自体には別のツールが必要になります）や、古い写真をアーカイブして、これ以上の劣化を止めたい場合などです。ただし、元のJPG保存による圧縮ダメージはすでに焼き付いていることを忘れないでください。 CocoConvertのようなツールが本当に時間の節約になるのは、一括変換です。デザイナーから受け取った200枚のPNGの商品写真をウェブサイトに掲載する必要がある場合、それらすべてを一度に画質80のJPGに変換できれば、非常に助かります。CocoConvertの一括アップロードは、無料プランでは50ファイル、Proプランでは500ファイルを処理できます。ただし、フォルダを監視したりAPIを提供したりはしません。そのレベルの自動化には、ImageMagickスクリプトやCloudinaryのようなサービスを検討する必要があります。
WebP、AVIF、その他のモダンなフォーマットについては？
PNGとJPGは20年以上にわたってウェブを支配してきましたが、その支配は揺らいでいます。Googleによって開発されたWebPは、現在すべての主要なブラウザ（Chrome、Firefox、Safari 14+、Edge）でサポートされています。これは非可逆モードと可逆モードの両方を備えた柔軟なフォーマットです。非可逆モードでは、WebPファイルは通常、同等の視覚品質のJPGよりも25〜35%小さくなります。可逆モードでは、PNGよりも20〜30%小さくなることが多いです。 AVIFはさらに新しく、圧縮をさらに推し進め、多くの場合JPGよりも40〜50%小さいファイルを作成します。これはAV1ビデオコーデックに基づいており、HDRコンテンツも美しく扱います。ブラウザのサポートも今や万全（Chrome 85+、Firefox 93+、Safari 16+）ですが、エンコード処理が遅く、ツールもまだ完全には成熟していません。 では、なぜ私たちはまだPNGとJPGにこれほど集中しているのでしょうか？第一に、普遍的な互換性です。JPGとPNGは、古いメールクライアントやオフラインソフトウェアを含め、*どこでも*機能します。第二に、知名度です。ほとんどのクライアントやベンダーはJPGかPNGを想定しており、WebPファイルをどう扱えばよいかさえ知らないかもしれません。そして最後に、ストックフォトサイトからプリントオンデマンドサービスまで、多くのプロのワークフローが、依然としてJPGとPNGのアップロードのみを中心に構築されています。 CocoConvertはWebPとの相互変換をサポートしており、これは素晴らしい機能です。私のアドバイスはこうです。もしあなたがモダンなウェブプロジェクトを構築し、技術スタック全体をコントロールできるなら、マスターソースファイルは高品質のJPGやPNGとして保持しつつ、配信フォーマットとしてWebPを使用することを検討してください。AVIFへの変換はCocoConvertのロードマップにありますが、まだ利用できません。
実践的な意思決定フレームワーク
さて、ここまで技術的な詳細をたくさん話してきました。これを、ほとんどの状況をカバーするシンプルな意思決定プロセスにまとめてみましょう。 **まず、コンテンツを見てください：** - それは写真や写実的な画像ですか？ → 透明度が必須でない限り、JPGを使用します。 - それはスクリーンショット、図、ロゴ、またはシャープな線を持つイラストですか？ → PNGを使用します。 - 絶対に透明な背景が必要ですか？ → PNGを使用します（ブラウザでのみ使用する場合はWebPも可）。 **次に、使用先を考えます：** - スピードが重要なウェブページですか？ → 写真には画質75〜85のJPG、グラフィックにはPNG。サポートされているならWebPも検討します。 - 印刷または長期保存用ですか？ → PNGまたはTIFF。再編集する予定のファイルにJPGは絶対に使わないでください。 - メール添付ですか？ → 写真にはJPG（1MB未満に抑えるように努力）、スクリーンショットにはPNG。 - ソーシャルメディアですか？ → 写真にはJPG（どうせ再圧縮されます）、テキストを含むグラフィックにはPNG。 **そして、どうか、これらのよくある間違いは避けるようにしてください：** - ロゴをJPGで保存して、なぜぼやけるのかと不思議に思うこと。 - ウェブサイトの写真すべてに巨大なPNGを使用して、なぜサイトがこんなに遅いのかと不思議に思うこと。 - 低品質のJPGをPNGに変換して、見た目が良くなることを期待すること。 - JPGの画質を70未満に下げて、シャープなエッジにブロック状のアーティファクトが現れて驚くこと。 もし本当に迷ったら、これが決め手です。両方のフォーマットで書き出し、開いて100%に拡大表示してみてください。画像の最もシャープな部分を見ます。JPGがクリーンに見えれば、それでOKです。もしぼやけや奇妙な色が見えたら、PNGが必要です。 CocoConvertのような変換ツールは、フォーマットを切り替えるという機械的な部分を完璧にこなしてくれます。しかし、それができないのは、あなたに代わって戦略的な決定を下すことです。そのためには、あなたの画像が何であり、どこで使われるのかを知る必要があります。このフレームワークが、その判断をずっと簡単に S てくれるはずです。