「画像をきれいにしたいなら、画素数を増やせばいい」。そう思っていませんか。
先に結論：細かさ・なめらかさ・出せる色を分けよう
- 画素数：画像を何個の点で表すか。細かな形を表せるかに関わる。
- 階調：明るさや色を何段階で表すか。グラデーションのなめらかさに関わる。
- 色域：どの範囲の色を再現できるか。画面と印刷で色が違って見える原因の一つ。
画素数だけを増やしても、色の段階や、印刷できる色の範囲は増えません。 今回は文化祭のポスターを例に、この3つの違いと、画像のデータ量の計算を学びます。
ポスターの空に縞、印刷したタイトルはくすんだ
夜9時。ユウキは文化祭のポスターを仕上げました。夕焼けはなめらかで、青緑のタイトルも鮮やかです。
ところが、ファイルを軽くする設定で保存し直すと、空に縞が現れました。さらに試し刷りでは、青緑がくすんだ色に。
ユウキ「画素は減らしてないのに……」
Sandy「ちょお待ちぃ！」
ユウキ「わかってる。縞と、色。二つおかしい」
Sandy「先に言われてもうたがな。ほな、原因を分けて調べるで」
これは動画内の架空の物語です。今回は、次の2つを分けて調べます。
起きたこと | 物語での原因 | 主に調べること |
|---|---|---|
保存した画像の空に縞が出た | 色の段階を減らした | 減色・ビット深度・書き出し設定 |
印刷した青緑がくすんだ | 画面と印刷の色の再現範囲が違う | 色空間・カラープロファイル・印刷条件 |
実際には別の原因もあり得ます。まず、元画像・保存後・印刷結果のどこで変わったかを比べましょう。
画素と解像度：点の数と、並べる密度を分ける
ラスタ画像を構成する小さな点が、画素（ピクセル）です。 横1000×縦800画素なら、画像全体では800,000画素になります。
「解像度」は、横×縦の画素寸法を指して使われる場合も、一定の長さに並ぶ画素の密度を指す場合もあります。単位と文脈を確認しましょう。
表記 | 表しているもの |
|---|---|
1000×800ピクセル | 画像の横と縦の画素数 |
800,000画素 | 全体の画素数 |
300ppi | 1インチあたり300画素という密度 |
600dpi | 1インチあたり600個のドットという出力などの密度 |
ppiはpixels per inch、dpiはdots per inchです。プリンタのドットは、画像の1画素と必ずしも一対一ではありません。
印刷などで配置する場合、横幅のインチ数＝横の画素数÷ppiで求められます。同じ1000画素の横幅なら、100ppiで10インチ、200ppiで5インチです。再サンプリングせずにppiの設定だけを変えても、画像の画素数や元の細部が増えるわけではありません。
ラスタ画像とベクタ画像の違い
ラスタ画像は画素ごとの色を持ちます。ベクタ画像は、線や曲線、座標などの形の情報を持ちます。
ラスタは点の色、ベクタは形の情報で画像を表します。
方式 | 保存の考え方 | 向いている例 |
|---|---|---|
ラスタ | 点の集まりとして表す | 写真、細かな質感のある画像 |
ベクタ | 線・図形を座標などで表す | ロゴ、図面、アイコン |
ラスタ画像を大きく引き伸ばすと、画素の粗さやぼけが目立つことがあります。ベクタの線は、拡大した大きさに合わせて描き直せます。ただし、ベクタ形式のファイルに埋め込まれた写真まで、無制限に鮮明になるわけではありません。
Sandy「点を大きくするんか、形を描き直すんか。保存の仕方がちゃうんや」
フルカラーは何色？24ビットと約1677万色の関係
画素の色を表すのに使うビット数が増えると、区別できる状態も増えます。1画素にnビットを使うなら、表せる状態は最大2のn乗通りです。
1画素1ビットなら2通り、1画素8ビットなら256通りです。ただし、画像編集ソフトの「8ビット」が、RGBの各成分あたりを意味する場合もあるため、単位の対象を確認します。
表記 | 何が256段階・256通りになる？ |
|---|---|
8ビットのグレースケール | 1画素の明るさが256段階 |
1画素8ビットのインデックスカラー | パレットの最大256色を番号で指定する |
RGB各成分8ビット | 赤・緑・青がそれぞれ256段階。合計24ビット |
インデックスカラーは、あらかじめ用意した色の一覧（パレット）の番号で、画素の色を指定する方式です。
ここでいう24ビットのフルカラーは、R・G・Bの各成分に8ビットずつを割り当てる方式です。
24ビットRGBは各成分256段階。画素データの量は1画素3バイトで計算します。
各成分は0〜255の256段階。組合せは、
256×256×256＝16,777,216色
となります。これが約1677万色の正体です。24ビット÷8＝3バイトなので、1画素は3バイトです。
ユウキ「RGBがそれぞれ256段階なのに、画像全体が256色だと思ってた」
Sandy「3つの組合せやからな。1画素8ビットと、1成分8ビットは別やで」
画像のデータ量を計算してみよう
圧縮せず、各画素を同じビット数で表す画素データだけを考えると、次の式が使えます。
横の画素数×縦の画素数×1画素あたりのバイト数
1000×800画素の24ビットRGB画像なら、3ステップです。
- 画素数：1000×800＝800,000画素。
- 1画素のバイト数：24ビット÷8＝3バイト。
- 全体：800,000×3＝2,400,000バイト。
ビットのまま計算すると、1000×800×24＝19,200,000ビットです。最後に8で割っても、同じ2,400,000バイトになります。
実際の画像ファイルには、圧縮、ヘッダー、色の情報、透明度、行末の調整用データなどが関わります。上の式の答えが、そのままJPEGやPNGのファイルサイズになるわけではありません。
RGBとCMYKの違い：画面の光と、紙のインク
画面と印刷では、色を見せる仕組みが異なります。
左は光を足すモデル、右は色材が光を吸収する理想化モデルです。実際の四色印刷では黒のKも使います。
光の三原色は、赤・緑・青のRGBです。 光を加える加法混色では、赤と緑で黄、緑と青でシアン、青と赤でマゼンタになります。適切な強さで三つを重ねると白になります。光がなければ黒です。
印刷の基本になる色材の三原色は、シアン・マゼンタ・イエローのCMYです。 インクなどが特定の波長の光を吸収する減法混色では、重ねると反射して戻る光が減り、暗くなります。
図のCMYは理想化したモデルです。理想的には三つを重ねて黒を作れますが、実際のインクでは十分な黒や細い文字の鮮明さを得にくいなどの事情があります。一般的な四色印刷では黒インクのKを加えたCMYKを使います。
16進6桁のカラーコードも、RGBの組合せ
Webで使う#RRGGBB形式のカラーコードは、sRGBのR・G・Bを、それぞれ16進数2桁で指定します。
Webの6桁表記は、RGBの各成分を16進数2桁ずつで指定します。
たとえば#33CC99は、33｜CC｜99と2桁ずつ分けます。
- R：16進数33＝3×16＋3＝51。
- G：16進数CC＝12×16＋12＝204。
- B：16進数99＝9×16＋9＝153。
各成分は00〜FF、10進数では0〜255です。前々回に学んだ16進数の変換を、そのまま使えます。
コード | R | G | B | 色の例 |
|---|---|---|---|---|
#FF0000 | 255 | 0 | 0 | 赤 |
#FFFFFF | 255 | 255 | 255 | 白 |
#000000 | 0 | 0 | 0 | 黒 |
1バイトが16進数2桁なので、RGBの3バイトは6桁で表せます。「番号で色を指定する」という点で、前回の文字コードの話ともつながります。
画面と印刷では、出せる色の範囲が違う
再現できる色の範囲を色域といいます。画面で鮮やかに見える青緑が、使うインクや紙では再現できず、変換後にくすんで見えることがあります。
ただし、「すべてのRGBは、すべてのCMYKより広い」と決め付けるのは不正確です。色域は、具体的なRGB色空間、機器、インク、紙などによって異なります。
また、範囲外の色の扱いは、カラープロファイルや変換方法によって変わります。必ず「いちばん近い色へ置き換えるだけ」とは限りません。印刷では、提出先が指定する形式や設定を確認し、可能なら校正表示や試し刷りで確かめましょう。
階調とは？点の数を増やしても、縞が消えない理由
階調は、明るさや色の成分を何段階で表すかという考え方です。 8ビットのグレースケールなら256段階。各成分8ビットのRGBなら、R・G・Bそれぞれが256段階です。
同じ画素数でも、色の段階を減らすと、なめらかな変化が大きな段差になります。
画素数が同じでも、階調が少ないとなめらかな変化に境目が現れやすくなります。
画像の細かさと階調は、別のつまみだと考えると整理できます。
- 画素数：細かな形や境界を、どれだけの点で表すか。
- 階調：明るさや色の変化を、どれだけ細かな段階で表すか。
たとえば空の色が少しずつ変わる画像を、わずかな段階にまとめると、同じ色が続く帯と、その境界が見えやすくなります。こうした帯状の見え方は、バンディングと呼ばれます。
ユウキ「点を減らしてなくても、色の選択肢が減ってたんだ」
Sandy「せや。点を増やすだけでは、捨てた色の段は戻らへんで」
ただし、縞が見えたら必ず階調不足、とは限りません。 圧縮や編集の処理、表示機器なども関わります。元画像と保存後を比べ、ビット深度、減色、書き出し設定を確認しましょう。一度失った階調は、ビット数を増やすだけでは復元できません。元の高品質なデータからやり直すことが大切です。
色相・明度・彩度：何が変わったのかを言葉にする
色の違いを説明するときには、色の三属性が役立ちます。
色相は色み、明度は明るさ、彩度は鮮やかさを表します。色見本は概念例です。
属性 | 意味 | 比較の例 |
|---|---|---|
色相 | 赤・黄・緑・青などの色み | 青緑から青へ |
明度 | 明るさ | 明るい青緑から暗い青緑へ |
彩度 | 鮮やかさ | 鮮やかな青緑からくすんだ青緑へ |
ユウキのタイトルは「青緑がくすんだ」と表現すると、彩度の違いに注目できます。ただし実際の印刷変換では、明るさや色みも変わる場合があります。「印刷すると彩度だけが下がる」とは限りません。
Sandy「『なんか違う』から一歩進んで、何が違うか言えると、直す場所も探しやすいやろ」
練習：データ量と階調を確かめよう
以下はこの記事のオリジナル学習例です。実際の共通テスト問題ではありません。計算では圧縮・ヘッダー・透明度などを除き、画素データだけを考えます。
問1：横640×縦480画素、24ビットRGB画像のデータ量は何バイト？
640×480×3＝921,600バイトです。24はビットなので、先に8で割って1画素3バイトに直します。
問2：RGBの各成分が4ビットなら、色の組合せは最大何通り？
各成分は2の4乗＝16段階なので、16×16×16＝4096通りです。合計12ビットで、2の12乗としても計算できます。
問3：画素数は同じなのに、保存後の空だけ帯状になりました。何を調べる？
減色やビット深度、書き出し設定、表示環境などを調べ、元画像と比較します。画素数だけを増やすことを、最初の解決策にしないのがポイントです。
まとめ：細かさ、なめらかさ、出せる色を分ける
ユウキは元のファイルからポスターを作り直し、色数を減らす設定を見直しました。印刷の条件も確認して、もう一度試し刷り。空の縞とタイトルの色を、別々に確かめられるようになりました。
覚えたいのは、次の三つです。
- 24ビットRGBは各成分8ビット、約1677万色、1画素3バイト。
- 画面はRGBの加法混色、一般的な四色印刷はCMYK。再現できる色は条件によって違う。
- 画素数と階調は別の要素。粗さ、縞、色の変化を分けて原因を調べる。
画像を「きれい・きたない」だけで終わらせず、何が変わったのかを説明できると、制作にも役立ちます。画像や色の指定をWeb・アプリ制作で使ってみたい人は、プログラミングスクールSandboxもご覧ください。
