JPGとPNGは、Webで最もよく使われる2つの画像フォーマットです。どちらも画面ではきれいに見えますが、内部の仕組みはまったく異なります。選び方を間違えると、写真がぼやけたり、単純なロゴが無駄に重くなったりします。
結論から言うと、JPGは写真のように色がなめらかに変化する画像に向き、PNGはロゴ・文字・アイコンのように輪郭がくっきりして透明背景が必要な画像に向いています。その理由を順に見ていきましょう。
非可逆圧縮と可逆圧縮
最大の違いは圧縮方式です。JPGは「非可逆圧縮」を使います。人の目では気づきにくい情報を捨てる代わりに、ファイルを大幅に小さくします。風景写真のように色が少しずつ変わる部分では、この劣化がほとんど見えないため、非常に効率的です。
PNGは「可逆圧縮」を使います。元のピクセルを1つも捨てずに保ったまま、容量だけを減らします。そのため同じ画像でもPNGはJPGより重くなりがちですが、画質の劣化はまったくありません。
透明背景が必要かどうか
PNGは透明度（アルファチャンネル）に対応しています。背景が透けるロゴ、切り抜いた人物、重ねて使うアイコンを作るにはPNGが必須です。JPGは透明に対応していないため、透明だった部分は白や黒で塗りつぶされます。
逆に、透明な部分がまったくない写真であれば、PNGの利点はなくなり、ファイルが大きくなるだけです。
ファイルサイズと繰り返し保存
ページの読み込み速度やアップロードを考えると、ファイルサイズは重要です。次の傾向を覚えておきましょう。
- 写真 = 同じ画質ならJPGの方がはるかに軽い
- ロゴ・図表・スクリーンショット = PNGなら文字の輪郭がくっきり保たれる
- JPGは保存するたびに少しずつ劣化する（世代劣化）が、PNGは何度保存しても変わらない
シーン別のおすすめ
まとめると、こう選べばよいでしょう。カメラやスマホの写真、背景が一面にある画像、メールやチャットで気軽に送る写真はJPG。透明背景のロゴ、文字をくっきり見せたいグラフィック、画面キャプチャ、印刷前の保存用原本はPNGがおすすめです。
手元のファイルが用途に合っていなければ、変換すれば済みます。PNGのロゴをJPGにして容量を減らしたり、JPG写真をPNGにして編集中の劣化を防いだりできます。Switchingではファイルがブラウザ内だけで処理され、サーバーに送信されないので、個人的な写真でも安心して変換できます。