初代編集長ブログ―安田英久

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

Web画像は「jpeg」と「png」どちらを使用すればよいのでしょうか。また、拡張子を使い分けることで解像度にどのような違いが出るのでしょうか。画像を綺麗に保存する方法、ファイルサイズを軽くする方法も併せて解説します。「画質が悪い」「画像が重くて表示が遅い」「メタデータってなに?」お困りの新人Web担当者が知っておきたい使い分けの基本。
Web担のなかの人

今日は、新年度シリーズとして(続くのかな?)、ウェブで使う画像の基本に関する情報をお届けします。お題は「PNG? JPEG? GIF?」どんなときにどのファイルフォーマットを選ぶべきかの基本です。

結論から言うと、ウェブ画像(動画ではない静的な画像)の基本は次のとおりです。

  • 写真(自然物)はJPEG

  • 画面キャプチャ(人工物)はPNG(しかも8bit PNGにして減色する)

  • 次のものは様子をみながら8bit 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のほうがキレイで軽い画像ファイルにしやすい場合もあります。

SVGを使いこなせれば上級レベル

最近では、ウェブ上でも「SVG(エスブイジー)」と呼ばれる画像ファイルフォーマットを使うことが少しずつ増えてきています。

ここで詳細には説明しませんが、PNGやJPEGが「ラスタ」と呼ばれる画像の表現方法なのに対して、SVGはまったく異なる「ベクトル」と呼ばれる画像の表現方式です。

ロゴやアイコンやグラフなどは、SVGを使うと軽くてキレイに表現できます。

画像の作り方から何からすべて違うのですが、PNGとJPEGに加えてSVGも使いこなせるようになると、あなたもウェブ画像の上級レベルだと言えるかもしれません。

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で画像を保存するときには、「この画像内で使われている色は何色ぐらいあるか」「何色で保存すれば元画像の意味や雰囲気を失わないか」などを判断しながら保存することが多いです。

赤色の再現や不可逆性に注意

元画像のパターンとファイルフォーマット選択の基本は前述のとおりですが、JPEGにはいくつかの弱点があり、それを避けるためにJPEG以外を選ぶこともあります。

その弱点とは、「赤色の再現」と「不可逆性」です。

赤色の再現」とは、JPEGがもっている色の再現性に関する弱点です。要は、JPEGで保存した場合、キレイな赤色がくすんで朱色のようになってしまう傾向があるのです。そのため、赤色が重要な表現の写真の場合は、JPEGではなくPNGを選ぶことがあります。

不可逆性」とは、いちどJPEGの品質100未満で保存すると、二度と元とまったく同じ画像には戻せないことを指すものです。

JPEGで保存すると、人間の目でぱっと見たぶんには違いがないように見えても、細かい点では元の画像とは違っています。細部がつぶれていたり、もやもやとしたノイズが乗ったり、四角形のパターンが見えるようなノイズが乗ったりと、元の画像と比べて品質が落ちているのです。

そのため、細かな点まで再現したい場合や、元の画像の質を100%保った状態で保存しておきたい場合は、写真でもPNGで保存しておくことがあります。

ただし、その目的でPNGを使う場合は、8ビットPNGの256色では表現力が足りないため、「24ビットPNG」で保存するようにします。

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

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

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

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

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

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

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

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

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

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

◇◇◇

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

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

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

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

Python
「Python」(パイソン)は、プログラミング言語の1つ。プログラマのグイド・ヴ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]