Webデザイナーにとっては日頃から馴染みのある「画像形式」ですが、営業さんやクライアントさんにとっては「画像形式って何?」って感じだと思います。おそらくデザイナーの方は、制作依頼のやり取りのなかで同じ説明を何度もしなきゃいけなくて困る…なんて事が、実は多くあるのではないでしょうか。。。
私自身も過去に、営業さんの珍回答に思わず笑ってしまったことがあります。「JPGってパグの一種?」「GIF?自負?」「PNG?あぁピングー!ってペンギンでしょ。」と真顔で返され「想像力が豊かだなぁ~」と感じた経験があります。
そこで、今回はWeb制作の現場でよく扱われる「画像形式」について、いまいちよくわからない!って方に、本当は説明してあげたいけれど時間がない!以前にも教えたんだけどおそらく伝わってない!など業務で非常に困っているという方のために、「画像形式って何?」と聞かれた時に「とりあえずこの記事読んでわからないところは聞いてください。」と丸投げして時間節約になればいいなぁ~と、私なりにまとめてみましたのでご活用いただけたらと思います。
はじめに…
◎ピクセル(px)のことをまずは理解する
まずはじめに、画像の保存形式には「JPG」「GIF」「PNG」というものがあります。(PNGには[PNG-8]と[PNG-24]がありますが、それは後述します。)それらの画像形式は、どれも「ピクセル(px)」という単位で成り立っています。
ピクセルって何?
「ピクセル(px)って何?」ってところですが、まずは下の画像を見てください。
黄色の丸の部分に美味しそうなイチゴがあります。少しクローズアップして見ると・・・
カクカクとした四角いブロックのようなもので、色が仕切られているのが見えるかと思います。
◎この四角いブロックが、ピクセル(px)という単位になります。
ひとつのブロックが縦1px×横1pxとなり、撮影された画像は実際の被写体(イチゴ)の色味をできるだけ忠実に再現しようと、可能な限り近い色をデジタルのカラーパレットから選んでイチゴを表現しています。その表現をする上で、選べる色の選択肢が多ければ多いほど、鮮明な画像(キレイな画像)と一般的には言われています。
家電量販店でデジタルカメラの商品広告を見ると「1300万画素!」とか「2000万画素!」とか画素数を訴求ポイントに販売しているカメラがあるの見たことがあるのではないでしょうか?つまり、画素数の値で「画質の良さ」を謳っていますが、実際には先程のピクセルが強く関係しています。画素数とピクセルの関係については、また別記事でご紹介しようかと思いますので割愛しておきます…。
色数・圧縮・透過で比べる
次に、それぞれの保存形式「JPG」「GIF」「PNG-8」「PNG-24」を「色数・圧縮・透過」という項目に分けて違いを見ていきます。
- 色数 …… 1pxにおいて表現できる色の選択肢の数
- 圧縮 …… 圧縮方法には、可逆圧縮と非可逆圧縮がある
- 透過 …… 背景を透明として保存できるかどうか
JPG | GIF | PNG-8 | PNG-24 | |
---|---|---|---|---|
色数 | 1670万色 | 256色 | 256色 | 1670万色 |
圧縮 | 非可逆圧縮 | 可逆圧縮 | 可逆圧縮 | 可逆圧縮 |
透過 | ✖ | 〇 | 〇 | 〇 |
これらの特徴を要約してしまえば、「JPG」は保存をするたびに劣化をしてしまい、背景を透明にすることは出来ない保存形式。「GIF」と「PNG」は、何度保存を繰り返しても劣化することがなく、背景を透明にすることもできる。
これだけ見てしまうと、じゃあ「GIF」か「PNG」を使えば良いのでは?となりそうですが、実際にはそれぞれに長所と短所があり使い分けた方がいいんです。
2.JPG(Joint Photographics Experts Group)とは?
◎「JPG/JPEG(ジェーペグ)」と読みます。
本来はプロカメラマンの標準ファイルとして開発されました。「JPGと言えば写真でしょ?」というのは、多くの人に浸透していることでしょう。
「JPG」の色数は1670万色もあり、彩な色表現が可能でキレイな写真データを保存する際に最適な保存形式とされています。実際デジタルカメラやスマートフォンで、写真を撮影した際にカメラに保存される画像データも基本的には、この「JPG」という形式で自動的に保存されるようになっています。
「JPG」は画像データを「ピクセル」に分割することでデータを圧縮。「JPG」の圧縮方法(保存方法)は、「非可逆圧縮」と呼ばれ、一度圧縮(保存)してしまうと元のデータには復元できないという性質を持っています。つまりデータを上書き保存するようなイメージと理解してください。
画質とメモリーの話・・・
また、「JPG」は、圧縮率を自由に選んで保存することができるという特徴を持っており、デジカメやスマホのカメラ設定でも、画質設定を[最高画質][高画質][中画質][低画質]などから選択できるのはそのためです。「せっかく撮影した写真はキレイに残したい。」というのが当たり前だと思いますが、保存枚数が多くなるほど、デジカメやスマホのメモリーは、膨れ上がりメモリーがいっぱいになってしまいます。
そこで、撮影した画像をどのような形で利用するのか?(例えばブログに掲載する、SNSでアップする、印刷してアルバムにするなど)が決まっているのであれば、必要以上に高画質で保存をする必要はなく、最適な設定を選んで撮影+保存した方が良いでしょう。ですが、それがなかなか決められないというのも正直なところ。ですので、普通に思い出として写真を撮っている方であれば、ひとまず[最高画質]で保存しておいて問題はないと思います。
WEBサイトで利用する目的や、ブログに張り付けるため、SNSやInstagramなどに掲載するためなどであれば、最高画質で保存したものをそのままアップロードすると、データが重すぎてサイトに画像が表示される速度が遅くなり時間がかかってしまったりすることがありますので気を付けるようにしましょう。
▼高画質JPGで保存
※Photoshopで「web用に保存」で「JPEG/最高画質100」
▼低画質JPGで保存
※Photoshopで「web用に保存」で「JPEG/低画質10」
JPGはデータを損失する特徴があるので、アートファイルを保存するのに理想的な形式とは言えません。それは、アンチエイリアスという処理がされることにより、くっりきとした線がぼやけてしまったり、かすれたりしてしまうため、文字や線、はっきりとした輪郭のあるような画像には向かないのが事実。その代わりに色彩表現力が最も高く、キレイに色のグラデーションを表現することができるので、一般的な風景写真などカメラで撮影する画像に関しては「JPG」が現状最適とされています。
GIF(Graphics Interchange Format)とは?
◎「GIF(ジフ)」と読みます。
GIFの特徴としては透明色が使えることに加えて、アニメーションを作成することができます。
一昔前に流行っていた、GIFアニメーション(通称ジフアニ)の事です。チカチカと点滅したり、テキストがパパッと切り替わったりする、コマ切れのバナー広告を見たことがあると思いますが、あれがGIFアニメーションです。
特徴としては、線や文字、図形などの塗りと線がハッキリしているもの。単色のべた塗りのもの。一般的な色で表現されるものの画像に適しています。透過保存も可能で、可逆圧縮のため画像も劣化しませんが、PNGに比べるとさほどメリットがないのも事実です。ですので、GIFで表現しなければいけないというシーンは、GIFアニメーションだけと割り切っても良いかもしれません。
GIFファイルは、8ビットカラーのファイルなので、画像内でCLUT(Color Look Up Table)と呼ばれるカラーパレットにある256色しか使うことができません。写真などの画像をGIF形式に変換すると、256色のカラーパレットの中から一番近い色で表現するため、グラデーションなどの微妙な色の変化などは表現できません。また、GIFの透明については輪郭部分の微妙な透過具合を表現できない為、0%か100%かのどちらかの処理が行われます。つまり透明は表現できるけれど、輪郭がギザギザになってしまう点を理解しておきましょう。
▼GIFで保存
※Photoshopで「web用に保存」で「GIF/カラー256」
PNG(Portable Network Graphics)とは?
◎「PNG(ピング)」と読みます。
PNGはGIFよりも透明色を滑らかに再現する画像に適しています。PNGはGIFのように8ビットカラー画像として保存(PNG-8)や、JPGのように24ビットカラーRGB画像として保存(PNG-24)などが選択できます。[PNG-8]では256色なのでGIFと同じ色表現になりますが、[PNG-24]形式であれば、1670万色を再現できるためGIFとは違い、グラデーションなどの微妙な色合いや50%透過などもよりリアルに再現ができるというメリットがあります。
また、可逆圧縮のため画像の質を落とさずに圧縮(保存)することが可能。ただし、デメリットとしてPNGはファイルサイズが1番大きくなりやすいことです。
▼PNG-8 / 色数が256色 / 164KB
▼PNG-24 / 色数が1670万色 / 482KB
▼JPG / 色数が1670万色 / 103KB
[PNG-24]と[JPG]で比較してみると、横700px×縦500pxの画像保存で「4.6倍」の差が出ました。ディスプレイの性能によって実際の表示具合の差異あると考えられますが、4.6倍の差ほどキレイな画像というようには感じないように思います。
Webにおける使い分け方
・輪郭のハッキリしない写真やグラデーションのある画像 | JPG |
・輪郭のハッキリしている図表、線画、文字などのある画像 | PNG-24 |
・グラデーションを含む、単色系の画像 | PNG-8 |
・アニメーションを必要とする画像 | GIF |
・切り抜きやアイコンなどで背景を透明に利用したい画像 | PNG-8 or PNG-24 or GIF |
このように、画像データの種類や表示サイズ、切り抜きか貼り付けか?など、Webページの中でどのように扱われるデータなのかによって、最適な画像形式を選ぶ必要があります。どれでも表示はされるけれど、見にくい画像や、表示に時間がかかりすぎる画像を扱ってしまうとユーザーにとってはストレスとなり、二度とサイトには戻って来ない。と言っても過言ではありません。
「キレイに表現したいけど、表示もスムーズにしたい!」このバランスの中で、Webデザイナーは、どの画像形式が最適なのか?を見極め判断する必要があります。
最後に…
長々と画像形式について解説してきましたが、少しは理解出来ましたでしょうか?「いや、余計にわからなくなった・・・。」「要はどういうことなの?」という方は申し訳ありません。。。先に謝っておきます。「以前よりは、少しは理解できたかも・・・」「思っていたことは間違ってなかったかな・・・」という方が多くいてくれればと願いますが、難しく考えずに上記の使い分け方に沿ってご判断していただけたらと思います。
以上となります。