コンピュータで画像を表現する

では,画像について確認していきましょう。コンピュータにおいて画像はどのように表現されているか知っていますか?

知らないです。

画像を開くと,きれいにディスプレイに映るけど,どうやっているのかな。

答えは画像を拡大していくとわかります。コンピュータ上の画像を拡大していきましょう。画像を拡大したものを下に載せておきます。

リンク

点がいっぱいあるね・・・。

点画みたいだなぁ。

そうなのです。コンピュータは画像を無数の点で表しています。今回は拡大した画像を載せましたが,余裕がある人はコンピュータ上で画像を拡大表示して自分でたしかめてみてください。

はーい。

このように画像は色のついた点,画素(ドット)という等間隔の格子の集合で表されます。 この画素数が多ければ多いほど,現実に近いきれいな画像になるのです。

なるほど〜。

この画像の細かさは画素の数によって表示され,解像度といいます。 解像度は1インチ(2.54cm)四方のなかにどれだけ画素があるのかを表しています。 これをppi(pixel per inch) や dpi(dot per inch)で表します。 ディスプレイでの表示はppi,印刷などの出力時はdpiで解像度を示します。

へぇ〜。

以下のツールをみてください。ここでは,画像を解像度で切り替えて表示することができます。 解像度の違いにより画像のみえ方やデータサイズに差がありますよね。

画像の解像度
解像度
80 dpi
ファイルサイズ
257 KB

たしかに,解像度が高い方がきれいだなぁ。

さて,コンピュータのディスプレイでの画素の色は,『光の三原色』というR(赤)G(緑)B(青)の三色でつくられています。 このRGBはそれぞれ256の明度や彩度の階調(段階)をもっています。 この256の階調をもつ三色で表すことができる色の数は,2563で計算できるので,約1678万色を表現できることになります。

すごい。

たくさんの色を表現することができるんですね。

そうなのです。階調については,次節で詳しく考えていきましょう。 先ほど,ディスプレイでは光の三原色を使うとお話ししましたが,色の三原色との違いはわかりますか?

うーん,なんだろう。

色の三原色って何色を使うんだっけなぁ。

光の三原色と色の三原色の違いは,大きく二つあります。 一つめは三原色の色が違うということです。 光の三原色はRGB,赤・緑・青ですが,色の三原色はCMY,シアン・マゼンタ・イエローです。

リンク

光の三原色では緑があるけど,色の三原色では緑ではなくて黄色なんですね。

赤とマゼンタ,青とシアンも同じような色合いですが,正確には同じ色ではありません。 このCMYはプリンターなどのインクなどで使われています。

なるほど〜。もう一つの違いはなんですか?

もう一つは,すべての色を混ぜたときの色が違います。 色の三原色は,美術の時間にやったことがある人もいるかもしれませんが,絵の具をすべて混ぜ合わせると黒色になりますよね。 この黒色が,色の三原色CMYをすべて混ぜたときの色です。 しかし,光の三原色はすべての色を混ぜ合わせても黒にはなりません。白色になります。

光の三原色は,R・G・Bを足していくことで明るさが増して白に近づいていきます。 これを「加法混色」といいます。 色の三原色は,マゼンタ・シアン・イエローを混ぜると黒に近づいていきます。 これを「減法混色」といいます。

なぜ,光の三原色と色の三原色を混ぜたときの色が違うのですか?

その理由は,人間の脳が色を認識する仕組みにあります。脳は目から光が入ってきたときには,赤を感じる細胞・青を感じる細胞・緑を感じる細胞でそれぞれ光を受けとります。光の三原色がすべて混ざった光,つまり強い光が目に入ると,脳はそれを白色と認識します。逆に物体の色は物体に光が吸収され,吸収されなかった色(補色)を脳が認識しています。そのため,色の三原色を混ぜた色は,すべての色の光を吸収するため,脳は黒色と認識するのです。

よくわからないなぁ。

難しいなぁ。

このあたりは,情報というよりも理化学系の分野になりますので,詳しく知りたい人は,調べてみてくださいね。

assignment確認問題

800x600ピクセルの画像を解像度200dpiで表示すると表示サイズはどうなりますか? 次のなかから一つ選んでください。 ただし,1ドット=1ピクセルとします。

  • label_outline4インチx3インチ
    thumb_up  正解!

    解像度200dpiは,1インチに200ドットあることを表している。 800x600の画像では各辺が 800÷200 と 600÷200 でインチのサイズがわかる。 したがって4インチx3インチ

  • label_outline8インチx6インチ
    not_interested  不正解!

  • label_outline16インチx12インチ
    not_interested  不正解!

  • label_outline40インチx30インチ
    not_interested  不正解!

コンピュータで画像を作成する

今度は,画像作成ソフトウェアについて学びましょう。

はーい。

現在では,無料で使える画像編集ソフトが数多く流通しています。 もちろん,有料の画像ソフトも数多くあります。 これらの画像作成ソフトは,大きく分けて二つに分類することができます。 一つめは,ペイント系ソフトウェアです。 ペイント系ソフトウェアは,ビットマップフォントのようにドットで画像を表現し,作成することができます。 このペイント系ソフトウェアで作成した画像形式は,ラスタ形式と呼ばれ,拡大するとギザギザになります。 このペイント系ソフトウェアは,画像やアイコンなど一般的に拡大せずに使うものを作成する際に用いられます。

なるほど〜。

ビットマップフォントと同じような特徴があるのですね。

二つめは,ドロー系ソフトウェアです。 ドロー系ソフトウェアは,アウトラインフォントのように,図形や線を開始点の座標や曲がり具合を示す関数として記録しています。 このドロー系ソフトウェアでつくられた画像形式は,ベクタ形式と呼ばれます。 拡大しても滑らかに表示され,マップや拡大される図などに用いられます。

実際にやってみたいなぁ。

では以下のツールをみてください。ここではペイント系・ドロー系の違いを確認することができます。次の四角の部分に絵を描いて,書き出しボタンを押してください。すると,下の四角に,ペイント系・ドロー系ソフトウェアで描いたときのイメージが出ます。この画像を拡大してみると,ペイント系は,ギザギザが出ていますが,ドロー系は滑らかな線になっていることがわかります。では確認してみましょう。

画像作成ソフト
サイズ(
ペイント系
ドロー系

画像データとRGBの階調

さて,最後に画像をデジタルデータにする方法について学んでいきましょう。

はーい。

色のRGBはそれぞれ256の階調がありました。以下のツールで,RGB値を自由に変えて,色が変わることを確認してください。RGB値を1だけ変えると,色の違いがわかるかなども,確認してみてください。

面白そう!

RGBによる違い

そうですね。いままでの講義で,デジタルデータでは,画像は画素という色のついた点で表されていること,色はRGBという値を使って表されていることがわかりました。コンピュータはこれらを利用して,画像をデジタルデータに変換しています。

うーん。

あっ,画素のRGBを2進法にして,データを保存しているということですか?

はい,その通りです。たとえば以下のような画像があったとします。

リンク

コンピュータは,まず画像を画素ごとのRGBに分解し,読みとります(標本化)。次に,読み取ったRGBを数値化します(量子化)。最後に,数値化した値を,2進法に変換します(符号化)。これで画像をデジタルデータにすることができます。

リンク

音をデジタル信号に変えるときと似ていますね。

ほんとだ。たしかに似ているね。

そうですね。 コンピュータはすべてのデータを2進法,すなわちデジタル信号で扱うため,何かのデータをデジタル信号にするためには,同じような作業をしなければならないのです。

なるほど〜。

先生,RGBの数値の下に表示されている文字列って何ですか?

それは16進法でRGB値を表した,色コードといいます。 色については,2進法よりもシンプルにRGB値を表すことができる16進法がよく使われます。

リンク

2桁ずつで,RGBを表してるんだね!

そうなんです! 覚えておかなくても大丈夫ですが,色コードが利用されて表示されることもあるので,そのときは16進法でRGB値が表示されていることを思い出してみてください!

では,確認問題をしてみましょう。

assignment確認問題

RGBの各色が256の階調で表される100x200ピクセルのフルカラー画像ではデータ量はいくらになりますか?一番近いものを次のなかから選んでください。

  • label_outline59KB
    thumb_up  正解!

    256階調を2進法で考えると8ビット必要。RGB各色について,Rで8ビット,Gで8ビット,Bで8ビット必要なので 8ビットx3色。画像のサイズは100x200ピクセルなのでデータ量は 8ビットx3x100x200=480000(ビット) となる。選択肢はキロバイトなので1バイト=8ビット,1KB=1024バイトを計算して,480000÷8÷1024=約58.6(KB)と求められる

  • label_outline469KB
    not_interested  不正解!

  • label_outline625KB
    not_interested  不正解!

  • label_outline5000KB
    not_interested  不正解!