核心的な違い：可逆圧縮と非可逆圧縮
JPEG は非可逆圧縮を使います。人間の目が気づきにくい画像情報——特に影、グラデーション、テクスチャ領域の細かい色のディテール——を捨てます。元のデータの一部が恒久的に失われるため、ファイルは小さくなります。JPEG から元のピクセル値を復元することはできません。得られるのは非常に良い近似です。
PNG は可逆圧縮を使います。各ピクセル値を記録されたとおりに正確に保存し、それから情報を一切捨てずに冗長性を見つけて取り除く数学的アルゴリズムを適用します。PNG を展開すると、元のピクセルデータがビット単位で正確に得られます。
サイズの違いは PNG のバグではありません。それは正確さのコストです。ファイルサイズが優先なら、JPEG が勝ちます。正確なピクセルの精度が必要なら、PNG が勝ちます。両者の選択は、画像に何が含まれ、それで何をする必要があるかによります。
PNG か JPG か：内容で選ぶ
サイズは内容に従います。画像が実際に何であるかに形式を合わせてください：
| 画像の内容 | 最適な形式 | 理由 |
|---|---|---|
| 写真 | JPG か WebP | 見える損失なく 5〜10 倍小さい |
| スクリーンショット、テキスト、UI | PNG | 鋭いエッジ；ここでは JPG より小さいことが多い |
| ロゴ、アイコン、透明度 | PNG か WebP | アルファ透明度；JPG は白で埋める |
| 平坦な色のグラフィック、図表 | PNG | 可逆で、繰り返しをよく圧縮する |
| よく再編集するファイル | PNG | 繰り返し保存しても品質劣化なし |
なぜ可逆圧縮は写真でもなお大きなファイルを生むのか
PNG は DEFLATE 圧縮——ZIP ファイルの中身と同じアルゴリズム——を使います。DEFLATE はデータ内の繰り返しパターンを見つけ、コンパクトに表します。パターンが存在するときは非常によく働きます：図の大きな純白の領域、ロゴの繰り返すテクスチャ、スクリーンショットの同一ピクセルの連なり。
写真にはそうしたパターンがほとんどありません。森、顔、街路の写真のすべてのピクセルは、隣とわずかに異なります。ピクセル値はあらゆる方向に連続的に変化します。DEFLATE は圧縮できるものをほとんど見つけられず、出力ファイルは生のピクセルデータとほぼ同じ大きさのままです。
JPEG はまさに反対の条件で働きます。画像を周波数成分に分ける変換を適用し、高周波の色のディテール——まさに写真に満ちている種類の複雑な変化——を積極的に捨てます。結果は、写真的な内容での見える品質損失を最小限にした劇的なサイズ削減です。
スクリーンショットと図：PNG がサイズで勝つところ
非写真的な内容では比較が逆転します。ウェブページのスクリーンショットには、平坦な色の大きな領域、鋭いテキストのエッジ、硬いエッジの UI 要素があります。DEFLATE は豊富な繰り返しがあるため、この種の内容を非常に効率よく圧縮します。
同じスクリーンショットを JPEG として保存すると、見えるアーティファクトが入ります。JPEG の圧縮アルゴリズムは鋭いエッジをぼかし、高コントラストの遷移の周りにブロック状のノイズを入れます——まさにテキストとインターフェース要素のあるところです。JPEG をきれいに見せるには、ファイルが PNG より大きくなるほど高い品質設定が必要になります。
経験則：スクリーンショット、図、ロゴ、テキストには PNG。写真には JPEG。
透明度：PNG にできて JPEG にできないこと
PNG はピクセルごとの透明度を保存するアルファチャンネルをサポートします。だからロゴとアイコンはほぼ常に PNG です：透明な領域がどのページの背景も透けさせます。JPEG には透明度のサポートがまったくありません。透明度のある PNG を JPEG に変換すると、透明な領域を単色——既定では白——で埋めます。これは品質のトレードオフだけでなく、機能的な変化です。
画像に透明な背景が必要なら、サイズに関わらず PNG が正しい形式です。WebP は透明度をサポートし、内容が多様な画像では PNG より小さなファイルをしばしば生む代替です。
JPEG の再保存問題
JPEG はファイルが再エンコードされるたびに情報を失います。JPEG を開いて編集し、再び JPEG として保存すると——最初の保存の圧縮アーティファクトが、最初の圧縮の上にさらに圧縮されます。これを数回すると、見える劣化が現れます：ブロック状のパッチ、カラーバンディング、ぼやけたエッジ。PNG にこの問題はありません。PNG はピクセルデータを変えずに何度でも開いて保存できます。
本格的な編集の標準ワークフロー：作業ファイルは PNG か元の生形式で保ち、それから最後のステップでウェブ配信用に JPEG に書き出します。これはすべての編集を通じて品質を保ち、非可逆圧縮を一度だけ生じさせます。
実際の典型的なサイズの違い
- スマホ写真を PNG にすると: 15〜25 MB。同じ写真を高品質 JPEG にすると：2〜5 MB。標準のウェブ品質では：1 MB 未満。
- スクリーンショットを PNG にすると: 200〜500 KB。同じスクリーンショットを同等の視覚品質の JPEG にすると：アーティファクトが高品質設定を要するため、しばしば PNG より大きい。
- 透明度のあるロゴを PNG にすると: 30〜100 KB。白背景で埋めた JPEG にすると：サイズは同程度だが透明度の機能を失う。
PNG を JPEG に変換すべきとき
PNG 写真があり——カメラアプリや編集ソフトから書き出されたものなど——透明度が不要なら、ウェブ公開のために JPEG に変換するのはほぼ常に正しい判断です。品質設定 80〜85 は、通常の表示サイズで元の PNG と見分けがつかないが 3〜5 倍小さいファイルを通常生みます。
PhotoTools は何もサーバーにアップロードせず、ブラウザ内で PNG を JPG に変換します。品質スライダーを調整し、プレビューを比べ、結果をダウンロードします。ほとんどのウェブ写真で、JPEG 版は画像が実際に表示されるサイズでは見える品質損失なく大幅に小さくなります。