形式の比較
PNGとJPG：どちらの画像形式を使うべき？
PNGとJPGは解決する問題が違います。PNGはピクセルを無損失で保存して透過に対応し、JPGは目がほとんど気づかないディテールを捨てて写真を劇的に小さくします。習慣ではなく内容で選びましょう。UIや文字はPNG、写真はJPGです。
PNGが得意なこと
PNGは可逆（ロスレス）です。何度開いて保存し直しても、すべてのピクセルがそのまま残ります。スクリーンショット、UIモックアップ、ロゴ、図表など、シャープな輪郭や文字を含むものに適した形式で、2つのうち本物の透過（アルファチャンネル）を備えているのはPNGだけです。代償はサイズで、写真の場合、PNGは同等のJPGの数倍の重さになることも珍しくありません。
JPGが得意なこと
JPGは写真のために作られています。なめらかなグラデーション、自然な質感、数百万の色。その非可逆圧縮は目がほとんど気づかないディテールを捨て、高品質設定でも写真を劇的に小さくします。透過はなく、シャープな輪郭はにじむため、文字やスクリーンショットはJPGだとぼやけて見えます。劣化は蓄積もします。JPGを何度も保存し直すと、少しずつ劣化が進みます。
ブラウザで変換して比較する
判断する最も速い方法は、自分の画像で試すことです。画像圧縮ツールにドロップし、出力形式に JPEG を選び、サイズと見た目の結果を元の画像と並べて比べてみてください。ブラウザ内蔵の canvas エンコーダーが PNG と JPEG の両方を扱うので、変換はすべてタブ内で行われ、アップロードはありません。スクリーンショットと写真を同じバッチにドラッグして入れれば、どちらの形式がそれぞれに合うかを一目で確認できます。
このガイドで使うツール
よくある質問
スクリーンショットはPNGとJPGのどっち？
PNGです。スクリーンショットは文字とシャープな輪郭だらけで、それこそJPG圧縮が真っ先ににじませる部分です。JPGで保存すると文字がぼやけ、輪郭の周りにハロー状のノイズが出ます。PNGなら完璧にくっきりしたままで、UI系の内容ならサイズもそれほど大きくならないことが多いです。
JPGをPNGに戻せば画質は回復する？
いいえ。JPG圧縮が捨てたものは永久に失われています。PNGに変換しても、すでに傷んだピクセルを無損失で、しかもずっと大きいファイルに保存し直すだけです。写真を軽くしたいときにPNGからJPGへ変換し、また編集する可能性があるなら元のPNGは取っておきましょう。