JPGとPNGって何が違うの？それぞれの特徴・メリデメリ・使い分け方をわかりやすく解説してみた

当ブログでは、ビジネスシーンで“誰でも・手軽に使える”資料デザインノウハウ・テクニックをお伝えしています。

ビジネスシーンで資料作成等を行なっている時、画像を資料内に挿入するケースも多いと思いますが、そんな時に「JPGとPNG、どっちを使えばいいの？」という声をよく聞きます。

そこで今回は、よく使う画像のデータ形式「JPG」と「PNG」の違いについて解説してみたいと思います。それぞれの特徴、メリットデメリット、用途によってどちらが向いているのか（使い分け方）など、実務において気になりやすい部分をわかりやすく整理してみましたので、仕事で画像データを扱うことが多い方の参考になれば幸いです。

画像データの仕組み

JPGやPNGの違いについて話していく前に、まず前提として知っておかなければいけないのが「画像データの仕組み」です。

画像データは「無数の点の集まり」

そもそも画像データは「ピクセル」と呼ばれる“色のついた小さな点の集まり”で成り立っています。たとえば、以下のようなシンプルな風景の画像があったとしましょう。

この画像をどんどん拡大していくと、最終的には四角形の点が見えてきます。この点のことを「ピクセル」といいます。

画像データは、このような無数の点が集まって形作られており、この点１つ１つに色がついていて、それぞれ明るさも違うし、鮮やかさも違っているため、大きく引いてみたときに１枚の色鮮やかな画像に見えるわけです。

「圧縮方法の違い」によってデータ形式が変わる

ただし、そのような色情報を持った無数の点が集まっているということは、データの情報量もとても大きく、容量も重たくなります。そのため、綺麗さを損なわずに少しでも画像の情報量を小さくする方法として、「圧縮」という技術が昔から色々と生み出されてきました。

その圧縮方法には色々と種類がありますが、その圧縮方法の違いによって、最終的に「JPG」のデータになるのか、「PNG」のデータになるのか、はたまた他の形式になるのかが決まるわけです。

そのような意味では、普段よく使う「JPG」や「PNG」のデータというのは、実はすでに“一回圧縮されたコンパクトな画像データ”ということが言えます。そしてそれぞれ圧縮の仕方が違うので、特性やメリット・デメリットも変わってきます。

特にこの２つは特徴に明確な違いがあるので、実際に使用する際は特徴の違いによって使い分けが必要です。

JPGとPNGの違い

実際に「JPG」と「PNG」でどのような違いがあるのか、それぞれの特徴やメリット・デメリットを整理した上で、違いをまとめていきます。

JPG

まずは一番よく見かける（?）であろう「JPG」の特徴やメリット・デメリットを整理してみました。

JPGとは

JPGは元々「Joint Photographic Experts Group」の略称です（これは別に覚える必要はありません）。これを「JPG」や「JPEG」と書いて、「ジェイペグ」という呼称で呼ばれています。

ちなみに「JPG」と「JPEG」の２つの表記を見かけると思いますが、この２つに特に違いはないので、どちらを使っても大丈夫です（最近は「JPG」の方が多く見かけるようになったかな？）

JPGの主な特徴

JPGの特徴としては、主なものを挙げると以下の通りとなります。

JPGは非可逆圧縮方式（画質において不要な部分（人間の目で見てもほとんどわからないような色の差の部分等）を間引き、必要な部分だけ残すという圧縮方法）を採用しているため、データサイズをかなり小さくすることができます。これがJPGの一番の特徴でしょう。

その代わり、JPGが採用している非可逆圧縮方式は「画質の劣化に弱い」という側面も持っています。非可逆圧縮方式では保存する度にデータが間引かれてしまうので、画質が毎回少しずつ劣化してしまうわけです。これは何も画像をいじらずに、ただ上書き保存しただけでも劣化してしまい、しかも一度画質を落として保存してしまうと、後から元に戻すこともできません。この点はJPGを扱う時の注意点といえます。

JPGのメリット・デメリット

次にJPGのメリット・デメリットですが、まずメリットとしては「実写写真の品質を保ったまま、データサイズを大きく落とすことができる」ことが挙げられます。

風景や人物などが映った写真は、よく見るとすごくたくさんの色で構成されています。たとえば人の肌を拡大して見てみても、明るいところから影のところまで細かい肌色のグラデーションができているので、色の境目がもはやはっきりとしていない状態になっているほどです。

その時JPGであれば、このような色の差の部分をうまく間引いて圧縮するので、実写写真の綺麗さ・精細さ（＝品質）を極力キープしたまま、データサイズを大きく落とすことができるわけです。そのためデータサイズをかなり気にしなければいけないWeb掲載用の画像などにJPGは向いているといえます。これがJPGの大きなメリットです。

一方デメリットとしては「色数が少ない、色の境目がはっきりとした画像には向いていない」ことです。

たとえばベタ塗りのイラストや文字の画像などは、色数が少なかったり色の境目がはっきりとしている画像の典型ですが、これらの場合、JPGだと輪郭や色の差がはっきりとしている部分にノイズが出やすくなり、そのノイズのせいで輪郭がボヤッとしてしまうことがあります（以下の画像参照）。この点が大きなデメリットです。

JPGが向いているもの

以上の特徴やメリット・デメリットの整理から言えることは、JPGが向いているものは「実写写真・画像」であり、逆に「イラストや文字などの画像」には不向きである、ということでしょう。

PNG

続いて「PNG」の特徴やメリット・デメリットについて整理していきます。

PNGとは

PNGは「Portable Network Graphics」の略称で、「ピング」、「ピン」、「ピーエヌジー」と呼ばれます。特に「ピング」と呼んでいる人が筆者個人的には一番印象ですね。どれで呼んでも差し支えありません。

PNGの特徴

PNGの特徴としては、主なものを挙げると以下の通りとなります。

まず PNGは非常に画質が高いのが大きな特徴です。加えて PNGは「可逆圧縮方式」という圧縮形式が使われており、この形式は何度データを編集しても、何回保存を繰り返しても、画質が全く落ちないという特徴も有しています。

もっといえば画質が落ちないどころか、たとえば一旦編集で画質を落として保存したとしても、後から元のデータに復元することすらできてしまいます。そのため画質面において非常に優位性の高いデータ形式です。

さらにPNGの特徴を表すものとして「背景を透明な状態で保存できる」ということも挙げられます。PNGは圧縮時に透過処理ができるため、背景を透明に抜いた状態にすることができます。そのため複数の画像やイラストを重ねて下に敷いたものを見せるなどを行いたい時も、 PNGであれば可能です。

背景が透明の画像も実務ではよく使うケースがあると思いますが、これはPNGでしかできないため、必ず覚えておきたい特徴でしょう。

PNGのメリット・デメリット

次にPNGのメリット・デメリットですが、まず挙げられるのは「とにかく画質が良い」ことです。実写の写真であろうが、デザインされたイラストであろうが、非常に綺麗に保存することができます。

特にJPGが苦手としていた「色の境目がはっきりとしているベタ塗りのイラストや文字の画像」等も、ノイズは全く出ずに、すごく綺麗に表示可能です。さらにイラストの画像の場合は、データサイズもJPGより小さくできることもあります。

そのためイラストや文字の画像等を保存するときは、PNGの方がJPGよりも優れていると、いうことがいえます。

ただし、そんな優秀なPNGでもデメリットもあります。それはJPGが得意としている「実写写真だとデータサイズが大きくなりやすい」ということです。PNGはJPGのように“色情報を間引いて圧縮する”ようなことをしていないので、データサイズがどうしても大きくなりがちです。

特に実写写真だと色のグラデーション・色数がすごく多くなるため、データサイズが膨れ上がります。元々の画像の解像度にもよりますが、同じ実写写真でもJPGとPNGで比べると、PNGの方がデータサイズが4倍以上の大きさになることもあるほど。

そのため PNGはJPGと比べて画質の劣化がなく、メリットも多いですが、実写写真だとサイズが大きくなりやすい。これがPNGの特徴とメリット・デメリットになります。

PNGが向いているもの

以上の特徴やメリット・デメリットの整理から言えることは、PNGが向いているものは「イラストや文字の画像」であり、逆に「実写写真」には不向きである、ということでしょう。

JPGとPNGの特徴の違いを表にまとめてみた

ここまでの内容でJPGとPNGの違いがある程度理解いただけたかと思いますが、念のためこれまでの内容（特徴の違いなど）を以下の表にまとめてみました。

それぞれ特徴があって、どちらかというとPNGの方が優れている部分も多いですが、それでも PNGが苦手な部分を一部JPGが補完していたり、逆にJPGが苦手な部分をPNGが補完していたりもしているので、どちらが良いというよりは、場面によってうまく使い分けをしてあげるのがベターでしょう。

JPGとPNGの簡単な使い分け方

前述のとおり、JPGとPNGは場面によって使い分けるのが大切です。デザイナーとして活動している筆者も業務で様々な画像データを扱いますが、実際にケースバイケースでJPGやPNGを使い分けて、適切な対応を行うように心掛けています。

ただしノンデザイナーのビジネスパーソンの方々の場合、なかなか「使い分けが難しい！」と感じるケースも多いと思うので、よくある業務場面における「JPGとPNGの簡単な使い分け方」も最後にお伝えしておきます。

プレゼン用のパワポ資料作成時

特にノンデザイナーの皆さんが画像を使うことが多い業務場面としては、まず「プレゼン用のパワポ資料作成時」が挙げられるでしょう。パワポ資料においては、超鮮明で綺麗な画質の写真を使う必要もないでしょうし、社内でデータ共有することもあるでしょうから、そのような時は少しでもデータサイズが小さくできるjpgを使うと良いでしょう。

ただし、イラストや文字画像を入れる場合は、ノイズによって資料が見づらくなってしまうこともあるかもしれないので、そのような時だけPNGを使うのがおすすめです。

Webサイトに画像をアップする時

もう1つよく画像を使う業務場面を挙げるとするなら「Webサイトに画像をアップする時」があります。Webに画像をアップするケースの場合、少しでもデータサイズが小さい方がベターです。なぜなら、データサイズによってWebページの表示スピードが変わるためです（データサイズが小さい方が表示スピードが上がり、データサイズが大きいと表示スピードが遅くなる）。

そのため、Webサイトに画像をアップするときはデータサイズを小さくしやすいJPGを使うのがおすすめです。JPGであれば画質をある程度キープしたままデータサイズを圧縮することができます。また圧縮率もコントロールできるため、見た目とデータサイズのバランスがとりやすいのも大きな利点と言えるでしょう。

ただし、イラストとかロゴを綺麗に表示させたい場合や、画像の背景を透明にしなければいけない場合は JPGではできないので、その時だけPNGを使うのが良いでしょう。

まとめ：JPGもPNGも一長一短。使い分けが大事。

今回はよく使う画像のデータ形式「JPG」と「PNG」の違いについて解説しました。2つとも普段何気なく使っているものだと思いますが、それぞれに特徴に違いがあり、適材適所が存在しています。そのためやはり使い分けが大事です。

今回の内容では触れていませんが、実際にはもっと細かく見ていけばさらに特徴の違いもあったりしますが（PNGは3種類に分かれている、CMYKでなくRGBに対応している等）、ノンデザイナーの一般のビジネスパーソンの皆さんであれば、今回の内容程度のざっくりなレベル感で違いを捉えておけば十分だと思いますので、ぜひ参考にしていただければ幸いです。