6日でできる 新HTML&CSS入門｜画像が表示される仕組み

6日でできる 新HTML&CSS入門｜画像が表示される仕組み

画像は、無数の小さな光の点からできている。RGBとピクセルの仕組みを理解して、画面に色が表示される原理を見ていこう。

スマートフォンやパソコンの画面には、写真、動画、イラスト、ゲーム画面、Webページの画像など、さまざまなビジュアルが表示されます。私たちはそれを自然に見ていますが、画面の中では、とても細かい光の制御が行われています。

画像が表示される基本は、RGBとピクセルです。RGBは、Red、Green、Blueの頭文字で、赤、緑、青の光を組み合わせて色を作る考え方です。ピクセルは、画面を構成する小さな点です。画面上には無数のピクセルが並んでいて、それぞれのピクセルが色を持つことで、1枚の画像として見えます。

さらに細かく見ると、1つのピクセルは、赤、緑、青のサブピクセルに分かれています。この3つの光の強さを調整することで、赤、青、緑だけでなく、黄色、紫、水色、白、黒、グレーなど、多くの色を表現できます。

画像がきれいに見えるかどうかは、ピクセルの数だけで決まるわけではありません。解像度、DPI、色深度、ディスプレイの種類、画像ファイルの処理、GPUの働きなど、いくつもの要素が関係しています。

この記事では、画面の1点がどのように色を持つのか、ピクセルが集まると画像になる仕組み、LCDやOLEDの違い、色深度やDPIの意味、画像データが光として表示されるまでの流れを、順番にやさしく解説していきます。

色が見える基本は光の三原色

ディスプレイで色を表す基本は、光の三原色です。光の三原色は、赤、緑、青の3つです。この3つの光を組み合わせることで、さまざまな色を表現できます。

絵の具では、色を混ぜるほど暗く濁っていくことがあります。一方、ディスプレイの光は、混ぜるほど明るくなります。赤、緑、青の光をすべて強くすると、白に近い色になります。このような光の混ぜ方を加法混色といいます。

赤と緑の光を強くすると黄色に見えます。緑と青を組み合わせるとシアンに近い色になります。青と赤を組み合わせるとマゼンタに近い色になります。

そして、赤、緑、青をすべて最大にすると白になります。反対に、すべての光を出さない状態にすると黒になります。

Webカラーで使うRGBや16進カラーコードも、この光の三原色の考え方に基づいています。

図1：RGBの光が混ざって色になる仕組み

この図から分かること

この図から、ディスプレイの色は赤、緑、青の光を組み合わせて作られていることが分かります。

RGBそれぞれの光の強さを変えることで、画面上の色が変わります。赤を強くして緑と青を弱くすれば赤っぽい色になり、青を強くすれば青っぽい色になります。

3つの光をすべて強くすると白に近づき、すべて弱くすると黒に近づきます。ディスプレイはこの光の調整を、とても小さな点ごとに行うことで画像を表示しています。

ピクセルは画面を作る小さな点

ディスプレイに表示される画像は、ひとつの大きな絵がそのまま貼り付けられているわけではありません。実際には、非常に小さな点がたくさん集まって、1枚の画像として見えています。

この小さな点をピクセル、または画素といいます。

たとえば、横に1920個、縦に1080個のピクセルが並んでいる画面では、合計で2,073,600個のピクセルがあります。

このひとつひとつのピクセルが色を持ち、隣り合うピクセルと組み合わさることで、写真や文字、イラストが見えるようになります。

近くで画面を拡大すると、画像が小さなマス目の集まりでできていることが分かります。しかし、通常の距離で見るとピクセルがとても細かいため、私たちにはなめらかな画像として見えます。

サブピクセルがRGBの光を担当する

ピクセルは、さらに細かく見ると、赤、緑、青のサブピクセルで構成されています。

1つのピクセルの中に、R、G、Bの3つのサブピクセルがあり、それぞれの明るさを調整することで、そのピクセルの色が決まります。

たとえば、赤い点を表示したい場合は、Rサブピクセルを強く光らせ、GとBを弱くします。白い点を表示したい場合は、R、G、Bをすべて強くします。黒い点を表示したい場合は、すべての光を出さない、または非常に弱くします。

このように、画面の1点の色は、RGBの3つのサブピクセルの光量によって作られています。

1つのピクセルだけを見ると小さな点ですが、その点が何百万個も集まることで、写真のような複雑な画像も表現できます。

解像度はピクセルの数を表す

画像や画面の細かさを考えるときによく使う言葉が解像度です。

解像度は、横方向と縦方向にどれだけのピクセルが並んでいるかを表します。一般的には、横のピクセル数 × 縦のピクセル数で表記します。

解像度が高いほど、画面内に多くのピクセルを表示できます。そのため、細かい文字や画像のディテールを表現しやすくなります。

たとえば、FHDの1920×1080は、横に1920個、縦に1080個のピクセルが並ぶという意味です。これを掛け算すると、約207万個のピクセルになります。

4K UHDでは3840×2160なので、約829万個のピクセルになります。FHDよりもはるかに多くの点で画像を表現できるため、より細かい表示が可能になります。

解像度が高いほど細かく見える理由

解像度が高い画面では、同じ大きさの領域により多くのピクセルを並べられます。そのため、線や文字の輪郭、写真の細部がなめらかに見えます。

逆に、解像度が低い画像を大きく引き伸ばすと、1つひとつのピクセルが目立ち、画像が粗く見えることがあります。これをピクセルが見える、またはドットが目立つと表現することがあります。

Web制作では、画像の解像度が高ければよいというわけではありません。高解像度の画像はきれいに見えますが、ファイルサイズが大きくなりやすく、ページの読み込みが遅くなることがあります。

そのため、画面に必要な大きさに合わせて、適切な解像度の画像を用意することが大切です。

LCDとOLEDの違い

ディスプレイにはさまざまな種類がありますが、代表的なものにLCDとOLEDがあります。

どちらも画面に画像を表示するための技術ですが、光を出す仕組みが異なります。

LCDは、背面にあるバックライトの光を使います。その光を液晶シャッターやカラーフィルターで調整し、必要な色として表示します。つまり、光源はバックライトで、液晶が光の通し方を制御しています。

OLEDは、各サブピクセルそのものが発光します。バックライトを必要とせず、ピクセル単位で光を出したり消したりできます。そのため、黒を表示するときに光をほとんど出さないようにでき、深い黒や高いコントラストを表現しやすくなります。

図2：LCDとOLEDの表示の違い

この図から分かること

この図から、LCDとOLEDでは光を作る仕組みが違うことが分かります。

LCDは、バックライトの光を液晶やカラーフィルターで調整して色を作ります。画面の後ろから光を当て、その光をどれだけ通すかによって明るさや色を制御します。

OLEDは、サブピクセルそのものが光ります。必要な場所だけを光らせることができるため、黒をより黒く見せやすく、コントラストの高い表示に向いています。

仕組みは違っていても、RGBのサブピクセルを制御して色を作るという基本は共通しています。

色深度は色の細かさを表す

色深度は、1つのピクセルでどれだけ細かく色を表現できるかを表す考え方です。Color Depthとも呼ばれます。

RGBそれぞれに何bitを使うかによって、表現できる色の数が変わります。

フルカラーでは、R、G、Bそれぞれに8bitを使います。8bitでは0から255までの256段階を表せます。赤が256段階、緑が256段階、青が256段階あるため、組み合わせると約1677万色になります。

色深度が高いほど、色の段階を細かく表現できます。そのため、空や夕焼けのようなグラデーションもなめらかに表示しやすくなります。

色の段階が少ない場合、グラデーションがなめらかにつながらず、帯のように見えることがあります。この現象をバンディング、または階調飛びと呼ぶことがあります。

DPIは画素の密度を表す

DPIはdots per inchの略で、1インチの中にどれだけの点があるかを表します。

画面では、ピクセル密度を説明するときに使われることがあります。DPIが高いほど、同じ面積の中に多くのピクセルが並びます。

スマートフォンの画面は、比較的小さな面積に多くのピクセルが詰め込まれています。そのため、近くで見ても文字や画像がなめらかに見えやすくなっています。

同じ解像度でも、画面サイズが違えばDPIは変わります。たとえば、同じ1920×1080でも、大きなテレビと小さなスマートフォンでは、1インチあたりのピクセル密度が大きく異なります。

Web制作では、画像をどの画面で見るのかも考える必要があります。高密度ディスプレイでは、低解像度の画像がぼやけて見えることがあります。

画像データが画面に表示されるまで

画像が画面に表示されるまでには、いくつかの処理が行われます。

まず、画像ファイルが読み込まれます。JPEGやPNGなどの画像形式は、そのまま画面の光になるわけではありません。ブラウザやOSが画像ファイルを解析し、ピクセルごとのRGB値に変換します。

その後、各ピクセルの色情報が画面表示用のデータとして準備されます。GPUは、その情報をもとにディスプレイへ表示データを送ります。ディスプレイ側では、ドライバICがサブピクセルの光の強さを制御します。

そして、赤、緑、青の光が発せられ、人間の目に届きます。網膜にある色を感じる細胞が反応し、脳がその情報を処理することで、私たちは色や画像として認識します。

画像が表示されるという現象は、ファイル、ソフトウェア、GPU、ディスプレイ、人間の目が連携して起きているものです。

図3：画像ファイルが光として表示されるまで

この図から分かること

この図から、画像ファイルがそのまま画面に貼り付いているのではなく、いくつもの処理を通って光として表示されていることが分かります。

まず、ブラウザやOSが画像ファイルを読み込み、ピクセルごとのRGB情報に変換します。その情報をGPUが処理し、ディスプレイへ送ります。

ディスプレイでは、サブピクセルの明るさを調整し、赤、緑、青の光として画面に表示します。その光が人間の目に届き、脳で色や画像として認識されます。

Webページに画像を置くときも、このような仕組みを意識すると、画像の解像度、ファイルサイズ、表示品質を考えやすくなります。

画像ファイル形式と表示の関係

画像ファイルには、JPEG、PNG、WebP、AVIFなど、さまざまな形式があります。これらは画像を保存するための形式であり、画面に表示される前にブラウザなどによってデコードされます。

どの形式でも、最終的に画面に表示されるときは、ピクセルごとの色情報として扱われます。

Web制作では、画像の見た目だけでなく、ファイルサイズも重要です。大きすぎる画像は読み込みに時間がかかり、ページ表示が遅くなる原因になります。

きれいな画像を使うことは大切ですが、必要以上に重い画像を使わないようにすることも、ユーザーにとって使いやすいページ作りにつながります。

HDRは明るさと色の幅を広げる技術

HDRはHigh Dynamic Rangeの略で、明るさの幅や色の表現力を広げる技術です。

通常の表示よりも、明るい部分はより明るく、暗い部分はより暗く表現しやすくなります。そのため、現実に近い光の印象を出しやすくなります。

HDRを活かすには、画像や動画のデータだけでなく、表示するディスプレイ側もHDRに対応している必要があります。

また、10bit以上の色深度や広い色域に対応していることも重要になります。HDRは、単に明るい画面という意味ではなく、明るさと色の幅をより豊かに扱うための技術です。

ミニLEDとマイクロLED

最近のディスプレイ技術として、ミニLEDやマイクロLEDも注目されています。

ミニLEDは、LCDのバックライトを細かく分割し、部分ごとに明るさを調整する技術です。暗い部分は暗く、明るい部分は明るく表示しやすくなるため、コントラストを高められます。

マイクロLEDは、非常に小さなLEDを画素として使う技術です。各画素が自分で光るため、OLEDに近い自発光の特徴を持ち、高輝度や長寿命が期待されています。

表示技術は進化していますが、基本となる考え方は共通しています。画面上の小さな点を制御し、その点から出る光によって画像を作るという仕組みです。

画像がきれいに見える条件

画像がきれいに見えるかどうかは、いくつかの要素が関係します。

たとえば、解像度が高くても、圧縮しすぎた画像では細部が崩れて見えることがあります。逆に、高画質な画像でも、表示サイズに対して解像度が足りないと、拡大されたときにぼやけます。

また、同じ画像でも、ディスプレイの性能によって見え方が変わることがあります。色の鮮やかさ、黒の深さ、明るさ、階調のなめらかさは、表示デバイスの特性に左右されます。

Web制作では、画像をただ配置するだけでなく、表示される環境も意識することが大切です。

Web制作で画像表示を考えるときのポイント

Webページに画像を使うときは、画質と表示速度のバランスを考えます。

高解像度の画像は美しく見えますが、ファイルサイズが大きくなりやすいです。ファイルサイズが大きいと、ページの読み込みに時間がかかります。

一方、画像を軽くしすぎると、画質が荒くなったり、文字や細部が読みにくくなったりします。

画像表示の仕組みを理解しておくと、なぜ画像がぼやけるのか、なぜ表示が遅いのか、なぜ色が違って見えるのかを考えやすくなります。

Webクリエイターとして画像を扱うときは、見た目の美しさだけでなく、表示速度、解像度、色、アクセシビリティも含めて考えることが大切です。

使用キーワードを整理する

画像が表示される仕組みを理解するために、主な用語を整理しておきましょう。

最初に押さえたいのは、RGB、ピクセル、サブピクセルです。

RGBの光の強さが色を決め、ピクセルが集まることで画像になります。そして、ピクセルの中ではサブピクセルが赤、緑、青の光を担当しています。

この基本が分かると、解像度、色深度、DPI、ディスプレイ方式などの話も理解しやすくなります。

画像表示を理解するとWeb制作に役立つ

画像が表示される仕組みを知っておくと、Web制作で画像を扱うときの判断がしやすくなります。

たとえば、画像がぼやけて見えるときは、表示サイズに対して画像の解像度が足りない可能性があります。ページが重いときは、画像ファイルのサイズが大きすぎるかもしれません。色が思ったより違って見える場合は、ディスプレイの特性や色の管理が関係していることもあります。

ディスプレイ上の画像は、RGBの光とピクセルの集合によって作られます。画像ファイルはブラウザやOSで処理され、GPUやディスプレイを通して光として表示されます。

この流れを理解しておくと、画像の最適化、表示品質の調整、レスポンシブ対応、高画質表示などに取り組むときに、より納得感を持って判断できるようになります。