JPGとPNGきちんと使い分けていますか?これでわかるホームページで使う画像形式の選び方。


ホームページで画像を使うときに、
たいていは以下の3つの形式を使うでしょう。

・JPGファイル形式
・PNGファイル形式
・GIFファイル形式

その中でも特にJPGやPNGを使うことが多いのですが、
それぞれどのように使い分けるのでしょう
それぞれに特徴があるので、
見た目を損なわずに画像の容量をより小さくできる形式で画像を書き出しましょう。
特にモバイルデバイスでもホームページを閲覧することが多くなった今では、
画像の読み込みサイズはとても重要
画像のサイズが必要以上に大きければ、画像をダウンロードするのに時間がかかって、そのためページ自体の読み込みが遅くなる。
ページの読み込みが遅くなると、それだけユーザーは離れていってしまいます。
適切な画像形式を選択できるようになっておきましょう。

理由はともかく、どのファイル形式がいいのか

細かい説明は後程、とりあえずJPGとPNGってどうやって書き出しを分けているのか。
理由はともかくとりあえずこうを覚えておくといいでしょう。

画像形式の特徴

  • JPG:複雑な画像
  • PNG:形がシンプルな画像。透過が可能(半透明も可)。
  • GIF:色数が少ないシンプルが画像。透過が可能(半透明も不可)。

実際に使う画像としては

  • JPG:写真画像
  • PNG:イラスト、透過が必要な画像
  • GIF:ボタンなどのシンプルなパーツ

こんな感じです。
たいてい、ホームページでは画像の種類はこれくらいしか分類されないでしょう。

写真画像はわかりやすいですね。
会社の外観とか、海とか空のイメージ画像とかそういった写真を使った画像はJPG形式で書き出します。

画像を使ったWEBサイト

写真を撮ってホームページに貼り付けるなんてことは多いと思います。
そんな時は迷わずJPG形式です。

ですが、こんな時はどうでしょうか。
写真の画像なんですが、切り抜いて使用するような場合ですね。

女性の切り抜き画像

JPG形式は透過を表現できません
切り抜き画像の場合は、透過部分があるのでJPGでは表現できないため、
こういった透過の必要な画像はPNG形式を使います。

また、イラストとかをホームページに載せるときも、PNGを使います。

イラストを使ったWEBサイト

イラストと言ってもボタンやアイコンのように小さくてシンプルなものもありますよね。
そういった場合はGIF形式を使うとファイルサイズが非常に小さくおさまります。
後に書きますPNG(8bit)形式でもいいでしょう。

ファイル形式を考えるといってもそこまで複雑ではありません、

写真画像はJPG
でも、透過が必要ならPNG
イラスト画像はPNG
ボタンとか小さなものはGIF

以上のことを意識して画像形式を判断するだけでも大丈夫でしょう。

ただし、実際に明確に線引きできるわけではありませんので、
写真によってはPNGの方が良かったり、イラストによってはJPGが良いものもあるかもしれません。
最終的には、ファイルの書き出し時にそれぞれの形式でどれくらいのサイズになるかがわかるので、
比較して一番サイズの小さくなる形式で出すようにしましょう。

JPG,PNG,GIFについてもう少し知っておこう

上のことを知っているだけでも十分だと思いますが、
各ファイル形式についてもう少し詳しく知っておきましょう。

JPG

使用できる画像の色は約1,677万色のフルカラーです。
圧縮率も大きく、写真の画像形式として使われます。

デジカメやスマートフォンで写真を撮ると、書き出しはほとんどこの形式になっています。
写真 = JPG
で、とりあえず考えておきましょう。
JPEGとPNGの比較
写真画像を書き出すと、JPGの方がPNGの2分の1のサイズでいいのがわかりますね。
ただし、このJPGっていうのは圧縮率をよくした分、デメリットもあります。
画像をきれいなままファイルサイズを高圧縮するために、
その過程で元あった情報が欠落してしまい、元の状態には戻せないというデメリットがあります。
元に戻せない圧縮「不可逆圧縮」といいますが、
1回圧縮する程度であれば気になりませんが、何度も画像を書き出していると画質がどんどん悪くなってしまいます

JPEGによる圧縮では、画像を8×8ドット単位の正方形で区切って、
このひとつのブロックを近い色に置き換えることで圧縮していきます。
後程PNG形式の圧縮方法も説明するので、比較のため覚えておきましょう。

PNG

PNGにはいくつかの形式がありますが、
8bit(PNG-8)と24bit(PNG-24)とあります。
※bit数によりもっと高画質で出すことができますが、わかりやすく上記2つとして書きます

8bit
8ビットカラー、つまり256色で表現します。
透過表現も可能
です。

32bit
32ビットカラー、フルカラーで表現できます。
透過表現も可能
です。

どちらを使うかは色数に応じて使い分けてください。
このPNG形式は可逆性の圧縮なので、画像を元に戻すことができますが、
そのためJPEGほど圧縮率は高くありません。

ただ、イラストのような画像についてはJPGよりも画像サイズが小さくなることがあります。
PNG形式の画像の圧縮方法は、ランレングス圧縮といって隣り合う色とその数を記録します。
例えば、「A A A A A B B B B B B B B B A A A」は「A 5 B 9 A 3」と表します。
17文字が6文字に減りましたね。

さらに、データがこの2種類(AとB)だけで、最初にAが来ることにしておけば、「5 9 3」だけで表せる。このルールに従ったときにBが最初に見つかった場合は、最初にAが0回連続していることにすれば良い。例えば、「B B B A A A A A B B B B B A A A」は「0 3 5 5 3」で表せることになる。
Wikipediaより

この圧縮方法を見ると、隣り合う色が同じものが連続する方が圧縮効率がよくなる。
例えば「ABCABCABCABC」だと「A1B1C1A1B1C1A1B1C1A1B1C1」と情報が倍になる。
逆に「AAAAAAAAAAAA」だと「A12」とたった3文字に圧縮される。
つまり、画像の種類によって小さくもなるが大きくもなってしまうということで、
一般的にはJPGで書き出しをして、PNGの圧縮形式に強いものはPNG形式で書き出すというようにすればいい。
PNGが強いものというのは隣り合う色ができるだけ同じ色がいいので、
写真のような複雑なものではなく、イラストのような形がシンプルなものに効果を発揮するということです。
次の画像では、イラストはJPGよりもPNGの方がサイズが小さくなることが分かります。
JPEGとPNGの比較
色数が少ない(256色以下)場合は、8bit形式のPNGファイルにすればかなりサイズが小さくなります。
ボタンやアイコンなどはPNG(8bit)で書き出すといいでしょう。

GIF

256色までをサポートする高圧縮なファイル形式です。
256色以下のボタンやアイコンなどはGIF形式でファイルサイズを抑えることができます。

3つのファイル形式を紹介しましたが、
アイコンに関してはSVGをおすすめします。
一般的な画像とはちょっと違うのですが、いろいろなデバイスで閲覧することが増えた今は、
このSVGというファイル形式がとても重要になってきます。
SVGについては、こちらの記事を参照してください。

知ってた?レスポンシブサイトでの画像は、SVGを使えば軽くてキレイで最高に便利。