PNGとJPEGの違い！ファイル形式の特徴や使い分け方法を詳しく

インターネットのお仕事を始めると必ずと言っていいほど取り扱うことになるのが画像です。
ところが、画像と一言でいっても、JPEG、PNG、GIF、TIF、BMPなど、さまざまが画像フォーマットがあります。インターネット上では重い画像をアップすると、サイトが重くなって使い勝手が悪くなります。
では、Webサイトなどで画像を使いたい場合に、どの画像をどうやって使えばよいのでしょうか。画像のJPEGやPNGにはどのような違いがあるのでしょうか。
そこで今回は、Webサイトで画像を扱うときの使い分けや、それぞれの画像フォーマットの特徴についてまとめました。

PNGの特徴

まずはそれぞれの画像フォーマットの特徴からみていきましょう。
PNG(ピング)は、「可逆圧縮」という圧縮方法です。色のついた小さい点（ビット）を敷き詰めたデータで同じ色をひとつのグループとして圧縮し保存します。色をグループとして保存するためロゴやイラストに向いています。
また、この「可逆圧縮」は一度圧縮して保存しても品質を落とすことなく元の状態に戻すことができることと、画像内の一色を透過させたり、画素ごとに透明度を設定できるのが特徴です。

PNGの種類

PNGはWeb利用を目的に作成された画像形式で、色数の違いによって「PNG-8」「PNG-24」「PNG-32」の3種類に分かれます。データ容量が大きく変わるため用途に合わせて使用しましょう。ここではPNGのそれぞれの種類について解説します。

PNG-8

利用可能色：256色データサイズ：軽い
用途としてアイコンやロゴなどの色数が少ないデザインと透過ができます。しかし、半透明にすることは出来ません。また、色情報が少ないためコンテンツと透明色部分の境目が粗くなります。メリットはほかのPNG形式よりもデータ容量が軽くできることです。

PNG-24

利用可能色：約1,677万色データサイズ：重い
PNG-24は、約1,677万色の利用が可能です。色数が多いため写真やグラデーションのある画像にも対応できます。画像を綺麗に保存できますが、そのままPNG-24で保存するとJPEGよりも数倍データが大きくなってしまいます。また、PNG-24は透過できません。

PNG-32

利用可能色：約1,677万色　＋　256段階の透明度データサイズ：最も重い
PNG-32は、約1,677万色と、256段階の透明度が利用できます。そのため半透明が使用できる画像形式です。イラストから写真・グラデーションすべてに対応できますがPNG-24よりもデータが重くなります。

JPEGの特徴

次にPNGとはまた別の画像フォーマット、JPEG（ジェイペグ）についてみていきましょう。
JPEGは、「不可逆圧縮」という圧縮方法で、画像データにある画質で不要なデータ部分を削除し、必要な部分だけ品質を保つことでデータを軽量化する圧縮方式です。
この「不可逆圧縮」は字の通り、保存をするたびに不要なデータを削除するため品質が下がります。削除し品質が下がったら圧縮前の状態に完全に復元できないという特徴があります。

JPEGの利用方法

利用可能色：約1677万色データサイズ：軽い〜重い（復元不可）
JPEGの大きな特徴として利用可能色数が約1677万色あります。写真やグラデーションのある画像データが綺麗に見えます。逆に色がはっきりしているロゴやイラストではノイズが出やすくなります。
JPEGとPNGを同じ色数で比べると、PNGの種類によって表現は可能ですが、JPEGの方が軽くなります。
下記は画質100から画質10に変えた時の違いです。ファイルサイズは300KBから23KBと変更しても色むらはありますが綺麗に見えています。
画質100 ファイルサイズ300KB

画質10　ファイルサイズ23KB

その他の拡張子

PNGやJPEGの他にも画像データとして利用されることのある拡張子についてかんたんに説明します。

GIF

GIF（ジフ）は、256色の限られた色数で構成される「可逆圧縮」形式の画像です。色数が限られているため、ロゴ・ボタン・イラストなどに適しています。
また色を重ねて動きをつけアニメーション画像を作成できることが特徴です。

TIF

TIF（ティフ）は、写真など解像度の高い画像が必要な場合などに用いられます。デジタルカメラの保存などで使われることがあります。データ保存でJPEGとは違い復元が可能となりますが、データ容量が大きいためWeb上では利用できません。

BMP

BMP（ビーエムピー）は、Microsoft Windowsのために作られた画像形式です。圧縮をしないで利用することが多くデータ容量が大きいためWeb上では利用できません。

JPEGとPNGの違い

ここまで見ていただいたことでわかる通り、PNGとJPEGで共通しているのはどちらも「圧縮している」ということです。
TIFやBMP画像ですと容量が重いのでWebにアップするのは適していません。ですので、Webで使用する場合はPNGやJPEGに変換して画像素材として活用しましょう。
PNGもJPEGも圧縮して使うものですが、画像データの圧縮方式に違いがあります。JPEGは圧縮したら一方通行で元に戻せませんが、PNGの方は可逆圧縮方式より元の状態に戻すことができます。また、PNGだと透過処理ができますが、JPEGだとできないというのも大きな違い一つとなります。
ちなみに、画像変換ツールなどでPNGをJPEGに変換しようとすると、できる時とできない時があります。その理由は、上記の説明の通り、同じ「.png」という拡張子であっても、PNGにはファイルの画像形式に3種類あるためです。
PNGとJPEGの違いについては以下の表におまとめしましたので、よろしければご参考にしてください。

JPEGとPNGの使い分け

これまでPNGとJPEGを解説してきました。下記でまとめましたので今後の参考に、PNGとJPEGの使い分け、適切な画像データを利用してください。

Web上で利用する場合

・画像が悪くない程度に圧縮し軽くした「JPEG」・色数を使っていないロゴやイラストなら「PNG」
WebサイトやブログといったWeb上で画像を利用する場合、あまり重いとページの読み込みに時間がかかってしまい、ユーザビリティが落ちてしまいます。
高解像度の画像をアップしても、画面のサイズ以上の解像度は人の目に違いとしてほとんど認識することはできません。
今回紹介した、PNGとJPEGの得意な部分を意識しつつ、インターネット上で展開する場合は画像サイズを重くなりすぎない程度に調整して展開するようにしましょう。
また、ベタ塗りのイラストやロゴ・グラフなど、色数を使用していない場合にはPNGの方が質が良くデータが軽いという性質があります。

印刷する素材として利用の場合

・解像度の高い（データ容量が重い）「PNG」・画像は高画質を保つため劣化させずに「JPEG」
ポスターやチラシ・雑誌など紙へ印刷して利用する場合は、画像データの重さは関係なく解像度の問題となります。Web表示用よりも、印刷物の方が大きな解像度を必要とし、解像度が大きく高いほどデータの容量は重くなります。

まとめ

今回はWEBサイトで画像を扱うときの使い分けや、それぞれの画像フォーマットの特徴についてまとめました。
拡張子によって保存の特徴があり、それぞれのメリット・デメリットがあります。利用する際には、特徴を理解し用途にあわせて使い分けていきましょう。
今回は以上です。最後までお読みいただきましてありがとうございました。