PNG vs JPG

写真なら JPG。文字・くっきりした輪郭・透明が絡むものはすべて PNG です。

PNGが向いている場面

文字、はっきりした線、角の立った平らな面があるなら PNG——スクリーンショット、ロゴ、図表。背景を透明のままにしたいときも必ず PNG です。

JPGが向いている場面

写真なら JPG。なだらかな階調や細かい粒に対しては場所を取らず、しかも違いが見えません。

見落とされがちなところ

JPG で保存したスクリーンショットは、文字の周りに汚れた縁を抱え込み、それはもう取れません。逆に PNG に入れた写真は、良くならないまま巨大になります。同じ絵が、10 倍の場所を占めるだけです。

PNGからJPGに乗り換えるとき

失われるもの

JPG にはアルファチャンネルがありません。透明を含む PNG ファイル から出てくると、その部分は塗りつぶされています——指定がなければ白です——そして JPG 側のどの設定でも、その透明を取り戻すことはできません。

PNG は 1 チャンネルあたり 16 ビットまで扱え、JPG に残るのは 8 ビットです。この余裕こそが、思い切った補正をかけてもトーンジャンプを出さずに耐えるぶんです。ですから変換は編集のあとに行ってください。先ではありません。

残るもの

EXIF データ、XMP データ、ICC プロファイルは引き継げます。PNG にも JPG にも、それを収める場所があります。

結果を開く

Adobe PhotoshopとGIMPは PNG と JPG のどちらも読めるので、別のプログラムを開かずに、結果を元のファイルと並べて確かめられます。

ファイルサイズと品質

ファイルはかなり小さくなります。そして小さくなる方法は、細部を捨てることです。PNG はすべてを保持し、JPG は目がどのみちほとんど見ない部分を捨てます。写真ではこの取引はほぼ無料ですが、文字やスクリーンショットや線画では、輪郭のまわりのにじみとしてはっきり見えます。

どちらの形式が何のためのものか

PNG は PNG Development Group の形式です(1996 年に登場)。 記録は 1 チャンネルあたり 16 ビットです。

JPG は Joint Photographic Experts Group の形式で、1992 年から使われています。規定は ITU-T T.81 です。Adobe Photoshop、GIMP、Previewがこの形式を読めます。

JPGからPNGに戻すとき

失われるもの

PNG にはキャプション、クレジット、キーワードを収めた IPTC フィールドとGPS の座標を収める場所がないので、それらは JPG ファイル から先へは進みません。元のファイルを捨てる前に確かめておくと役に立ちます——そして、捨てることこそが目的だったのなら、これはそのまま朗報です。

変換先の形式が追加で扱えるもの

PNG は透明を扱えますが、JPG は扱えません。これは結果の側にあって、元のファイルが一度も使わなかった余地です。変換によって透明な背景ができるわけではなく、あとから作れるようになるだけです。

結果を開く

Adobe PhotoshopとGIMPは JPG と PNG のどちらも読めるので、別のプログラムを開かずに、結果を元のファイルと並べて確かめられます。

ファイルサイズと品質

結果は元より大きくなり、そして良くはなりません。JPG はすでに細部を捨てており、PNG は残っているものをそれ以上捨てずに保持します。これは今後の劣化を止めますが、すでに起きた劣化を戻しはしません。

どちらの形式が何のためのものか

JPG は Joint Photographic Experts Group の形式です(1992 年に登場)。 記録は 1 チャンネルあたり 8 ビットです。

PNG は PNG Development Group の形式で、1996 年から使われています。規定は ISO/IEC 15948 です。Adobe Photoshop、GIMP、Paint.NETがこの形式を読めます。

PNGからJPGへの変換で実際に起きること

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as PNG.

PNG139 KB

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as JPG.

JPG9 KB15.9 分の 1

なだらかな階調、やわらかい輪郭、粒状感のある写真です。JPGが想定している、あるいは想定していない典型例で、数値がどちらなのかを示します。 どちらの画像もコードで描き、このページで動くのと同じ変換器でエンコードしています。つまりサイズは当サイト自身の出力です。
A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as PNG.

PNG7 KB

A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as JPG.

JPG6 KB18% 小さい

背景が透明で、図形にグラデーションがかかっています。JPGは両方を保持するか、片方だけ保持するか、透明部分を単色で塗りつぶすかのいずれかです。ここが見落とされがちな差です。 どちらの画像もコードで描き、このページで動くのと同じ変換器でエンコードしています。つまりサイズは当サイト自身の出力です。
A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as PNG.

PNG3 KB

A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as JPG.

JPG16 KB6.3 倍

インターフェース、グラフ、ロゴのような、平坦な色と硬い輪郭です。上の写真とは挙動がまったく違い、答えが「ファイルの中身による」になる理由でもあります。 どちらの画像もコードで描き、このページで動くのと同じ変換器でエンコードしています。つまりサイズは当サイト自身の出力です。

並べて比べる

PNGとJPGを項目ごとに比較 — 何を保持し、その代償は何か。
PNGJPG
Full namePortable Network GraphicsJPEG Image
拡張子.png.jpg, .jpeg, .jpe
メディアタイプimage/pngimage/jpeg
圧縮方式可逆 — 何も捨てない非可逆 — サイズを画質で買う
当サイトで書き出せるかはいはい

決まりましたか。ここで変換できます

これらのフォーマットについて

この数値の出典

このページがPNG and JPGについて述べていることは検証できます。根拠となる資料は次のとおりです。