新米ウェブマスターのためのウェブマスターブログ

8ビットカラー、セーフカラー、ハイカラ―、トゥルーカラーとは

2013年12月31日 00:00

8bit-safe-high-true-color

ウェブページで使える画像の形式は、GIF、JPEG、PNGの3つです(かつてはPNGを表示できない環境が多くありました)。
写真はJPEG、透過したい場合はPNG、その他はGIF、みたいな感じで使い分けていることと思います。
では、その使い分けの理由をご存知でしょうか?

全て32ビットのPNGで書き出せば、美しさだけは最高のクオリティを実現できます。
なぜなら扱える色の数がもっとも多く、アルファチャンネルにも対応しているからです。
それぞれの形式が扱える色の数は、GIFが256色、JPEGとPNGが16,777,216色です。
ですが、より多くの色を表現できるということは、それだけより多くの情報量を持つことになり、その分ファイルのサイズは増加してしまいます。その結果、表示に時間がかかってしまい、閲覧者のストレスは憎悪となって苦情の電話は鳴り止まないでしょう。

より快適に閲覧してもらうには、画像によって最適な形式、表現方法を選択することが求められます。
というわけで、今日は扱える色の数が異なる、以下の4つの表現方法について掘り下げてみたいと思います。

 

まずはじめに

(ご存知の方は読み飛ばしちゃってください)

RGBとは

PCやスマートフォンなどのディスプレイはRGBで表現されています。

R(Red:赤)
G(Green:緑)
B(Blue:青)

赤と緑では青は作り出せず、赤と青では緑は作り出せず、緑と青では赤を作り出せない。
これがいわゆる3原色というやつです。
ちなみに印刷に使うインクはCMYKで表現されます。

この3原色をそれぞれ明度で分割し(階調)、それらの組み合わせで色を作り出します。
階調の最大値は256段階で、合計16,777,216色になります(トゥルーカラー)。

ビットとは

コンピュータの大部分はデジタル回路という電子回路で構成されています。
それらのデジタル回路には複数のピンがあり、ピン1本が送れる信号は0か1の2通りです。
このピン1本が持つ情報量を1ビットといい、コンピュータにおける情報の最小値です。
ちなみに、8ビットで1バイトになります。

8ビットカラー / 256色

1ビットにつき2通りなので、8ビットは2の8乗で256通りです。

即ち、8ビットカラーとは最大256種類の色情報による表現方法です。
例えば、画像をGIFで書き出す場合、扱えるカラーは8ビットカラー(256色)が上限ですから、1枚の画像に同時に表現可能な色の数は256種類になります。

256色と聞いて、多いと思いますか?少ないと思いますか?
現在、広く市販されている一般的なディスプレイは24ビットカラー対応です。これらのディスプレイで表現できるカラー数はなんと16,777,216色です。この中のたった256色しか使えないんです。
では、この256色にはどの色が含まれるのでしょうか?

ディスプレイが24ビットカラーに対応していればどの色を使っても大丈夫です。
必ずしも閲覧者のディスプレイがそれであるとは限りませんが、先に述べた通り、24ビットカラー対応のディスプレイが現在の主流です。使えない色はないと考えても差し支えないでしょう。

また、画像のカラー数が256色を超えていても、優秀なグラフィックソフトウェアが美しく仕上げてくれますのでご安心を!

8ビットカラーのディスプレイでも思い通りの色を表現するには、次のセーフカラーを使います。

セーフカラー / 216色

まず最初に理解しておきたいのは、セーフカラーは8ビットカラーのディスプレイでの閲覧を想定したものであるということです。

8ビットカラーのディスプレイでは、一度に表現できる色は256色です。そこには閲覧中のウェブページだけではなく、OSのウィンドウの色なども含まれます。
そして256色の中にどの色が含まれるかはOSやブラウザによって異なります。
つまり、閲覧者の環境によって、制作者の意図したものとは別の色になってしまう可能性があるのです。
そう、もはや自由な配色は絶望的なのです。

この問題を解決すべく、まだ8ビットのディスプレイが主流だった時代に、Netscape Communications社が提案しました。
RGBをそれぞれ6階調の明度(0%、20%、40%、60%、80%、100%)に分けているので、6×6×6で216色になります。
どんな環境でも全く同じ表現ができますよ、というお墨付きのカラーです。

ですが、先に述べた通り、セーフカラーが必要とされたのは8ビットカラーディスプレイが主流だった頃のお話です。
僕も含め、セーフカラーを意識しているデザイナーは今やほとんどいないのではないでしょうか。

ハイカラー(15ビット〜16ビット) / 32,768色〜65,536色

15ビット 16ビット
R 5ビット 32階調 5ビット 32階調
G 5ビット 32階調 6ビット 64階調
B 5ビット 32階調 5ビット 32階調

8ビットと比較すると遥かに多い色が使えますが、24ビットと比較するとまだまだ表現に限界があります。
中途半端なので、おそらくもっとも使わない表現方法ではないでしょうか。

緑が1ビット多いのは、人間の目が緑に対してより敏感に識別できるためだそうです。
それはかつて地球が緑にあふれていた証拠かもしれませんね・・・。

トゥルーカラー(24ビット・32ビット) / 16,777,216色

R 8ビット 256階調
G 8ビット 256階調
B 8ビット 256階調

これだけのカラー数があれば、目で見たままを再現できるということからトゥルーカラー(truecolor)と呼ばれています。
写真はこれで書き出しておけば間違いないでしょう。

32ビットもカラー数は同じで、残りの8ビットはアルファチャンネルか、無意味なダミーとして使われます。
アルファチャンネルとは、背景を透過する場合に必要な補助データのことで、カラー情報とは別に追加できます。

補足:アルファチャンネルについて

画像の透過には、GIFもしくは、PNGが用いられます。

 

GIFの場合

256色のうちの1色にアルファチャンネルに割り当てることで、背景の透過を実現しています。
透明という色を割り当てると考えればわかりやすいと思います。
故に、アルファチャンネル使用時は最大255色になります。
また、半透明の表現はできません。

PNGの場合

8ビットと32ビットの透過方法があります。
8ビットの場合はGIFと同じです。
32ビットの場合は、色情報が割り当てられた24ビットを差し引いた残り8ビットをアルファチャンネルとして使うことができます。
これにより、画素(ピクセル)毎に透明度情報を追加することができるので、半透明の表現も可能です。

まとめ

  • 写真はJPEGかPNG 24
  • 背景のみ透明にしたい場合はGIFかPNG 8
  • 半透明を表現したい場合はPNG 32
  • それ以外はGIFかPNG 8
  • セーフカラーは意識する必要なし

写真ではなくても、精細なグラフィックを綺麗に見せたい場合はJPEGにするなど、その辺りは柔軟に対応しましょう。

コメント / トラックバック

このエントリーに対するコメント / トラックバックはまだありません。

メールアドレスが公開されることはありません。
*が付いている欄は必須項目です

*
*

次のHTMLタグと属性が使えます : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

トラックバック :

ページの先頭へ