PNGとJPEG画質の違いは? 拡張子でどう違う? ウェブ画像使い分けの基本

Web画像は「キレイで」「大きくて」「軽い」が命

ウェブサイトに画像は付き物です。ビジュアルに魅力を訴求することで、テキストだけのコンテンツよりも効果が増します。

しかし、画像というものは、キレイで大きくしようとすると、ファイルサイズが大きくなりがちです（これを業界では「重い」と表現します）。

• 画像のサイズ（縦横サイズ）が大きいほど、重くなる
• 画像内で使われている色数が多いほど、重くなる
• 画像が複雑であるほど、重くなる

そのためサイト運営側としては、画像の利用では次のようなことを意識しなければいけません。

• きれいで大きな画像は、重くなりがち
• 重い画像がページ内にあると、
  • ページ表示に時間がかかるようになります
  • となると、ページ訪問者はイライラしてページを離れてしまいます
  • さらにページ訪問者のギガを消費して嫌われます

そのためWeb担当者は、可能な限り「キレイで」「大きくて（縦横のサイズ）」、かつ「できるだけ軽い（ファイルサイズが小さい）」画像を実現したいところです。

Webの画像はPNGとJPEGが基本。理由は見栄えと軽さ

では、どうすればいいのでしょうか。

それは、「画像にあった適切な画像ファイルフォーマットを選ぶ」です。

「画像ファイルフォーマット」とは、画像の表現をファイルに保存してあとから再現する仕組みのことです。ウェブで利用する画像フォーマットはいくつかあり、多くの場合はファイル名の最後の「拡張子」で判断できます。

基本的な画像ファイルフォーマットには次のようなものがあります。

• PNG（ピーエヌジー）、拡張子は「.png」
• JPEG（ジェーペグ）、拡張子は「.jpg」や「.jpeg」
• GIF（ジフ）、拡張子は「.gif」
• TIFF（ティフ）、拡張子は「.tiff」
• BMP（ビットマップ、ビーエムピー）、拡張子は「.bmp」

現在の画像フォーマットは基本的に「できるだけ画質を落とさずにファイルサイズを小さくする」ために作られており（「圧縮」と呼ばれます）、フォーマットによって「こういうタイプの画像に向いている」「こういう性質がある」という違いがあります。その違いを理解して、合った画像フォーマットを選ぶのが大切なのです。

ではウェブではどんな画像フォーマットを使うのがいいのでしょうか。

現状では、手動で画像ファイルを扱う場合は「PNG」と「JPEG」だけに絞って問題ありません（静的な画像、つまり動画ではない場合）。

そのほかの「GIF」「TIFF」「BMP」などは、まず気にする必要がありません。ほかにも「PSD」「PSP」「PICT」「WEBP」「HEIF」などもありますが、これらも今は気にしなくてもいいです。

PNGとJPEGの使い分けは「写真（自然物）」か「人工物」か

では、PNGとJPEGはどう使い分ければいいのでしょうか。

まずは次のように覚えておくのがわかりやすいです。

• 人や景色や食べ物などの自然物の写真は「JPEG」
• 画面キャプチャや描き図版や概念図などの人工物は「PNG」（ただし8ビットPNG、後述）

このように選択すると、「よりキレイ（見える）」で「軽い」画像にしやすいものです。

「自然物」とは、多様な色が連続的に変化している複雑なものだと考えてください。

たとえば人の肌色や服の色、植物や空の色。どれも単純な塗りつぶしではなく、同じ面でも光の加減によって微妙に色が違いますよね。

JPEGは1600万色まで再現できるため、こうした自然な色の変化のものを再現するのに向いているのです。

ここで「自然物」と書いていますが、車や建物や道路などの人工物でも、写真で表現するときは同様に色が連続的に変わって見えますので、ここに含めます。

「人工物」とは、自然物の逆で、色が連続的に変化している部分が少なく、直線や塗りつぶしで構成されている部分が多いものだと考えてください。

コンピュータの画面は線と塗りつぶしで作られていることが多いですよね。こうした画像の場合は、できるだけ少ない色数で（つまり保存する情報を少なくして）かつ連続部分をうまく圧縮できるPNGが強いのです。

ただし、「人の写真が載っているウェブページの画面キャプチャ」など、上記の「自然物」と「人工物」が1つの画像内で混ざっている場合は、どの画像フォーマットで保存するのが良いか、悩ましいところです。

写真が中心になっている場合はJPEGで保存する、写真が多少つぶれて見えても特に問題ない場合はPNGで保存するというような判断になりますが、最終的には両方のフォーマットで保存してみて、見栄えとファイルサイズを見比べて決めることが多いです。

また、PNGで色数を減らして保存すると、グラデーションの部分が帯状になってしまうことがあります。グラデーションというのは「色が連続的に変化している」状態ですから、本来ならJPEGのほうが得意なものなのです。

この場合も、PNGで色数を調整したり（後述）、JPEGとPNGでそれぞれ保存してみたりして、見栄えとファイルサイズで決めることが多いです。

また、写真でも、色数が少なかったり直線的な部分がほとんどだったりする場合は、PNGのほうがキレイで軽い画像ファイルにしやすい場合もあります。

PNGもJPEGも保存時の追加設定に注意

ただし注意点があります。JPEGもPNGも、さらに保存時の設定があるのです。

• JPEG ―― 品質（多くの場合は0～100の数値）

• PNG ―― ビット数（8ビット、16ビット、24ビット）と、8ビットの場合は色数

それぞれ説明していきます。

JPEGの場合は「保存品質」を指定します。これはファイルの保存時に「どんな画像品質で保存するか」を指定するもので、品質が高いほどキレイになりますが、ファイルサイズが大きくなります。

たとえば0～100で保存品質を指定する場合、元が同じ画像でも、品質「90」で保存したJPEG画像ファイルは、品質「75」で保存したJPEG画像ファイルよりも、キレイ（画質の荒れが少ない、細かいところが判別しやすい）だけどファイルサイズが大きい画像になります。

多くの場合は品質75～90ぐらいを基準に「これだとキタナい」「これだとファイルサイズが大きい」など判断しながら保存することが多いです。

PNGには「8ビットPNG」「16ビットPNG」「24ビットPNG」などがあります。これは、ファイル内で何パターンの色を使うかの違いです。少し難しくなりますが、ウェブでPNGを使うのは「8ビットPNG」のためだと考えてください。

8ビットPNGは、画像内に使える色の数が最大で256色という制限がありますが、そのぶんファイルサイズを小さくできます。また、色数をさらに128色や64色などに減らすことで、全体のファイルサイズをさらに抑えられます（ちなみにPNGには画像の背景が透けて見える透過色を使えるという特徴もあります）。

たとえば、元が同じ画像でも、256色で保存したPNG画像ファイルは、64色で保存した画像ファイルよりも、キレイ（元画像の色を忠実に再現している、細かいところが判別しやすい）だけどファイルサイズが大きい画像になります。

そのため、PNGで画像を保存するときには、「この画像内で使われている色は何色ぐらいあるか」「何色で保存すれば元画像の意味や雰囲気を失わないか」などを判断しながら保存することが多いです。

画質の品質に関係ない「メタデータ」にも注意

最後に「画像の軽さ」に関して1つ。

ここまで説明してきたことは、「画像の品質」と「画像のファイルサイズ」のバランスの話しでした。

つまり、「キレイにすればファイルサイズが大きくなる」「ファイルサイズを小さくすると画質が落ちる」のバランスをとりながら、最適な「キレイで軽い」画像にするための判断です。

しかし、ウェブで使う画像ファイルは、最終的には少しでも軽くしたいものです。

そのため今は、画質を落とさずにファイルサイズを小さくする手段として、「メタデータの削除」という手順を最後に行うことが多くなっています。

これはどういうことかというと、「保存したソフトの情報」「写真の撮影情報」「プレビュー画像」など、最終的な画像本体の表示には関係のないデータを画像ファイルから削除する処理です。

画像処理ソフトによっては、特に何も指定せずに画像ファイルを保存すると、上記のような追加データをファイルに含めて保存する場合があります。

そうしたデータをウェブにアップロードする画像から削除することで、少しでもファイルサイズを軽くしようということですね。

こうしたデータを削除しても、最終的にサイト訪問者が目にする画像の品質にはまったく影響がありません。そのため、自動的にメタデータを削除するようにシステム化している場合もあるのです。

画像といっても意外と奥が深いものです。ここで解説した「写真はJPEG、キャプチャや描き図版は8ビットPNG」というのは、あくまでもスタート地点としての初期判断です。

慣れるに従って、「この場合はこういう保存がいい」「この画像ならこう保存するほうがいい」という判断ができるようになっていくことでしょう。

最終的にはページ訪問者さんの興味をもち、行動してくれて、かつ快適な画像ファイルになるように、われわれWeb担当者が知識をもって活動するのが大切ですね。