JPGとPNGの使い分け。違い。【Web制作】

Webページのデザインやコーディングの際、画像データの拡張子をどうするかという問題があります。JPG、PNG、GIF、SVGなど。

今回は、JPGとPNGの使い分けについて、簡単に整理していこうと思います。

  1. 結論
  2. JPGの特徴
  3. PNGの特徴
  4. まとめ

結論

結論から、簡単に言うと、

JPG → 写真などの自然物。色が連続的に変化するもの。
PNG → イラストなどの人工物や、透過部分のあるアイコンなど。

という感じです。

これには、圧縮の方式が大きく関わってくるようです。

JPGの特徴

JPGは、データを圧縮する際に、

複数のドットをひとまとめのピクセルとして変換します。

そのため、画質が落ちるかわりに、データのサイズをかなり小さくすることが出来ます。
データを小さくすることでWebページの読み込みの早さにつながります。読み込みが遅いと、読者のストレスにつながるので、データのサイズを抑えることは大事です。

画質が落ちるといっても、ドットをまとめる際にもっとも自然な色が選択されるので、一回の圧縮でそこまで顕著に、見た目が悪くなることはないでしょう。ただし、繰り返しJPGで圧縮するのは、よくないです。
途中の段階では、PNGで保存しておくのが良いでしょう。

JPGは色を透過させることが出来ません。背景がないくりぬいたような画像のことです。この場合、JPGは使えません。

PNGの特徴

PNGはデータを圧縮する際に、

同じ色が何個連続しているか?、というルールで、画像データを書き直します。
ルールを変えるだけなので、JPGのように画質が落ちることはありません。

塗りつぶしたように、ある空間が、同じ色でベタっと塗られているような画像だと、大きく圧縮することが出来ます。イラストやアイコンなどの、人工的な画像が向いている理由です。

逆に、写真などの自然をとらえた画像は、圧縮効率がよくありません。
例えば、家の壁を撮った写真を例にあげると、
人の目では1つの色ととらえるかもしれませんが、
実際には、細かい変化がありますよね?こういった画像をPNGで扱おうとすると、画像データが大きくなってしまい、よくないです。

そして、PNGは色を透過させることが出来ます。くりぬいたような画像のときも、PNGを選択しましょう。

まとめ

このほかにも、色数の違いなどもありますが、まずはこの辺をしっかり抑えておきましょう。

見栄えと、快適さ(読み込みの速さ)に関わってきます。

最近の記事