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