画像データの仕組みとは？ピクセル・RGB・解像度の違い

画像には、SVGのように線や形、座標の情報で表すベクター画像もあります。本稿では、スマホ写真やJPEG・PNG・WebP・AVIFなど、ピクセルで表す画像に範囲を絞ります。

画像データの仕組み｜点の位置と色を記録する

写真を小さな色のマスに分けると、一枚の絵を「どの位置に、どの色を置くか」という情報で表せます。このマスにあたるのが、ピクセル（画素）です。

第75話「画像データは何でできている？」では、ラボの写真カードを拡大して、この点の集まりを見に行きます。

横4個・縦4個の方眼紙なら、色を塗る場所は16マスです。横8個・縦8個にすると64マス。横も縦も2倍にしたため、マスの総数は4倍になります。

点が増えると細かな形を表す場所が増えます。ただし、粗い元画像を拡大するだけで、撮れていなかった細部まで正しく戻るわけではありません。

色も数値にすれば、コンピューターは位置と色の組み合わせとして画像を扱えます。文字や音をデータで表すときと同じように、見た目を扱える形へ置き換えているのです。

ユイ

写真を拡大すると、小さな四角が見えることがあります

イト

あの点が集まって、画像になっているの？

ピコ

うん。画像データは、点と色の情報として見ると入口がわかりやすいよ

RGBとは？赤・緑・青の光を数字で表す

画面の色は、赤、緑、青の光を組み合わせて表すことが多いです。この三つをRGBと呼びます。

赤をどれくらい、緑をどれくらい、青をどれくらい混ぜるかを数値で表すと、さまざまな色を作れます。たとえば、赤だけを強くすれば赤に近い色になり、赤と緑を混ぜると黄色に近い色になります。

マコト

画像は、点の場所だけでなく、その点の色も数値で持っているんだね

ユイ

写真の色も、画面の裏では数字の組み合わせとして扱われるんですね

たとえばRGBの各成分を8ビットで表すなら、一つの点の色は24ビット＝3バイト。64点なら色の部分だけで192バイトです。透明度・管理情報・圧縮を含めていない計算例なので、実際の画像ファイルの容量とは区別してください。

印刷向けの色や透明度など、目的によって別の情報も関係します。また、SVGのように線や図形の描き方を記録するベクター画像もあります。「画像はすべて、固定のマスだけを保存する」とは限りません。

解像度とファイルサイズは同じ？点の数と圧縮を分ける

「解像度」は文脈によって、画像の縦横の画素数や、一定の長さに並ぶ点の密度を指します。まず写真の情報画面では、横×縦のピクセル数とMBなどのファイルサイズを分けて見ましょう。

同じ写真でも、横4000ピクセルの画像と横800ピクセルの画像では、持っている点の数が違います。点が多いほど細かく見せやすいですが、扱うデータ量も増えやすくなります。写真をそのままWebページに置くと重い場合があるのは、必要以上に大きな画像を読み込んでいることがあるからです。

ファイルサイズは、画像のピクセル数だけで決まるわけではありません。画像形式、圧縮、色の数、透明部分、画質設定なども関係します。同じ大きさの画像でも、JPEG、PNG、WebPなど形式が違うと容量が変わることがあります。

圧縮と画像形式で何が変わる？

画像形式は、画像データをどんなルールで保存するかを示します。

JPEGは写真でよく使われます。容量を小さくしやすい一方で、圧縮の条件によって細かい部分が変わる場合があります。PNGは図やロゴ、透明部分を使う画像で便利な場面があります。WebPやAVIFは、Webで画像を軽く表示するために使われることがあります。

圧縮は、画像の容量を小さくするための工夫です。画質を保ちながら小さくできる場合もあれば、容量を下げるかわりに細部が少し変わる場合もあります。サービスによっては、アップロードした画像を自動で縮小したり、別形式に変換したりします。

画像がぼやける、色が少し変わる、透過が消える、容量が大きくてアップロードできない。こうした困りごとは、画像形式や圧縮設定、表示サイズを確認すると整理しやすくなります。

手元の写真でピクセル数と容量を確認する

写真を一枚選び、ファイルや写真アプリの情報画面を開いてみましょう。見る項目は次の三つです。保存し直す必要はありません。

1. 横×縦のピクセル数。たとえば1200×800なら、横1200個・縦800個の点で、全部で96万画素です。
2. KB・MBなどのファイルサイズ。ファイルを保存したり送ったりするときのデータ量です。
3. JPEG・PNGなどの形式。点や色などの情報を、どんなルールで記録したかを示します。

同じ縦横の画像でも、形式や圧縮の条件が違えば容量は変わります。「大きい写真」という言葉を使うとき、点の数なのか、MBなのかを言い添えると伝わりやすくなります。

画面へ戻すときは、ブラウザやアプリがファイルのルールに沿ってデータを読み、点と色を表示します。保存のルールを詳しく知りたいときはファイル形式とはへ。静止画が時間とともに変わる仕組みは、動画データの仕組みでつながります。

自分の言葉で説明してみよう

ここで扱うラスター画像とは、写真や絵を小さな＿＿＿＿＿＿＿＿＿＿＿＿に分け、色や明るさを＿＿＿＿＿＿＿＿＿＿＿＿として扱うデータです。
ピクセル数が多い画像は細かく見せやすい一方で、＿＿＿＿＿＿＿＿＿＿＿＿が増えやすくなります。
ファイルサイズは、ピクセル数だけでなく＿＿＿＿＿＿＿＿＿＿＿＿にも左右されます。

答えの例:

• ここで扱うラスター画像とは、写真や絵を小さな点、つまりピクセルに分け、色や明るさを数値として扱うデータです。
• ピクセル数が多い画像は細かく見せやすい一方で、保存容量や通信量が増えやすくなります。
• ファイルサイズは、ピクセル数だけでなく画像形式、圧縮、画質設定、透明部分にも左右されます。

ミニクイズ：点と色、容量の関係

Q1. この記事で扱うラスター画像は何の集まりとして考えられますか？

小さな点であるピクセルと、それぞれの色や明るさの情報の集まりとして考えられます。

Q2. ピクセル数が多い画像は、いつも軽いですか？

軽いとは限りません。ピクセル数が多いほどデータ量が増えやすく、形式や圧縮の条件によってファイルサイズも変わります。

Q3. 同じ写真に見えても容量が違うのはなぜですか？

画像形式、圧縮、画質、サイズ、透明部分などの条件が違う場合があるからです。