どうぐばこノート

PNG と JPEG の違い

写真は JPEG、図やロゴ、背景を透明にしたい画像は PNG、が基本の使い分けです。見本の画像で、ファイルサイズの違いを比べました。

見本で比べたファイルサイズ

見本の画像(600×400px)PNGJPEG(画質85)
写真のような画像(色が細かく変わる)355KB73KB
図のような画像(同じ色の面と線)2KB17KB
写真のような見本の画像
写真のような見本
図のような見本の画像
図のような見本

どちらの見本も、このサイトがプログラムで描いた画像です。ファイルサイズはこのページを作ったときに保存して測った値です。

いちばん大きな違いは圧縮のしかた

PNG と JPEG は、どちらもよく使われる画像の形式ですが、データを小さくする方法が違います。PNG は画像を少しも変えずに小さくする「可逆圧縮」で、保存し直しても画質は落ちません。JPEG は、人の目が気づきにくい細かい部分を捨てて小さくする「非可逆圧縮」で、写真をとても小さなファイルにできる代わりに、元とまったく同じには戻りません。

上の見本は、同じ画像を PNG と、画質を下げた JPEG で保存したものです。写真のような部分ではほとんど違いが分かりませんが、文字や細い線のまわりを見ると、JPEG ではもやもやしたノイズが出ているのが分かります。

写真は JPEG、図や文字は PNG

色がなめらかに変わる写真は、JPEG にするとファイルがずっと小さくなり、見た目もほとんど変わりません。デジタルカメラやスマホの写真が JPEG で保存されるのはそのためです。

一方、スクリーンショットや表、ロゴ、イラストのように、はっきりした線や同じ色の広い面がある画像は、PNG のほうがくっきりと保存できます。こうした画像では、PNG のほうがファイルが小さくなることもあります。

透明にできるのは PNG

PNG は、画像の一部を透明にできます。ロゴを背景の色に重ねたいときや、資料の上に印鑑の画像を置きたいときは、透明な部分のある PNG を使います。JPEG には透明の情報がないため、透明な部分は白などの色で塗られてしまいます。

WebP という選択肢

WebP は、PNG のように透明な部分を持てて、JPEG のように写真を小さく保存できる、新しい形式です。今のブラウザでは広く表示できますが、古いソフトや一部のサービスでは読み込めないことがあるため、相手に送る画像は JPEG か PNG にしておくと安心です。

どちらか迷ったときは

写真なら JPEG、それ以外なら PNG と覚えておけば、たいていは困りません。ファイルの大きさが気になるときは、形式の変換のツールで両方の形式に保存し、大きさと見た目を比べてから選ぶ方法もあります。

拡張子の見かた

ファイルの名前の最後にある「.png」や「.jpg」は拡張子と呼ばれ、画像の形式を表しています。JPEG の拡張子は「.jpg」と「.jpeg」のどちらも使われますが、中身は同じです。拡張子の文字だけを書き換えても形式は変わらないので、形式を変えたいときは変換のツールを使ってください。

パソコンの設定によっては拡張子が表示されないことがあります。Windows ではエクスプローラーの表示の設定から、Mac ではファインダーの設定から、拡張子を表示するように切り替えられます。

GIF という形式もあり、短いアニメーションを作れるのが特長です。使える色が256色までなので、写真の保存には向いていません。