1999/5/27
パソコンでインターネットを使うと、あたりまえのように画像（グラフィックス）が表示されています。とりたてて、どういう仕組みで画像が出てくるかということまではあまり意識しなくてもいいくらいにはなっています。単にページを眺めるだけでいいのなら、それでいいのですが、情報を発信する側としては、もう少し深い知識が必要とされます。画像の仕組みを理解し、画像処理につなげるというのが今回の目的です。
画像は、テキストなどと同様、コンピュータにとってはデータです。その画像をどういう風に記憶させるかという方式は大きく分けて2つあります。ただ、ここでは「どういう風に」ということ自体がどうなのかということまでは踏み込みません。まず、基本として「画像の表現方法」の代表的なものを紹介しましょう。
| 方式 | 表現方法 | 特徴 | 別名 |
| ベクター | 直線や長方形、曲線などの基本図形を組み合わせたものでグラフィックスを描く |
|
ドロー、オブジェクト（？） |
| ラスター | 点の集まりで画像を構成する |
|
ビットマップ |
ベクターグラフィックスは、基本図形の組み合わせで画像を作成します。基本図形とは言っても、直線や長方形だけなく、曲線も使えるので、それなりに自由度は高いといえるでしょう。しかしながら、一般には作図の手間は大変ですし、専門家によって作図されることも一般には行われています。ただし、ワープロソフトで作成する図でもベクターグラフィックスである場合もありますが、その場合には通常は誰でも使えるような操作体系になっています。この種のデータは一般には印刷向けです。
具体的には、たとえば、次のようなデータになっています。模式的に記述したものです。
直線;(0,0)-(40,20);赤;1pt
四角形;(20,40)-(120,60);緑;3pt;青
曲線;(2,30)-(34,45)-(45,67)-(190,456)
一方、ラスターグラフィックスは、むしろ「ビットマップグラフィックス」と呼ばれることが一般的です。長方形の画像領域を細かく分割し、その分割された1点1点に明るさや色を設定することで、画像を構成します。たとえば、デジカメやスキャナーで取り込んだ画像はビットマップ方式で記述されています。つまり、以下のような画像です。
■■■■■■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■□■■■■■■■■■■
■■■■■■■■■■■■■■□□■■■■■■■■■
■■■■■■■■■■■■■■□■□■■■■■■■■
■■■■■■■■■□□□□□□■■□■■■■■■■
■■■■■■■■■□■■■■■■■■□■■■■■■
■■■■■■■■■□■■■■■■■■■□■■■■■
■■■■■■■■■□■■■■■■■■□■■■■■■
■■■■■■■■■□□□□□□■■□■■■■■■■
■■■■■■■■■■■■■■□■□■■■■■■■■
■■■■■■■■■■■■■■□□■■■■■■■■■
■■■■■■■■■■■■■■□■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■■■■■■
インターネットで表示される画像は、ビットマップ画像が主体です。というのも、どちらかといえば、Webブラウザで画面で見ることを主体に考えられているためです。また、写真をベクターグラフィックスで表現することも不可能ではないのですが、写真はビットマップ画像のほうがより再現性は高くなります。
ビットマップ画像は、模式図で示したとおり、点の集まりです。その点1つ1つに色を指定することで、さまざまな模様や、あるいは写真ができあがります。写真の場合は、その1点1点の色は、機械が自動的に構成しますが、図を描くような場合、1つ1つを人間の手で指定することも行われます。
まず、ビットマップ画像を構成する点である「画素」（さらに「ドット」とも呼ばれる）は、縦横に規則正しく並ぶというのが原則です。その上で、空間的には次のような情報が画像に対して含まれることになります。
ただし、ディスプレイ表示サイズのように、サイズのことを「解像度」と言うこともあって、用語は注意が必要です。基本的には、解像度は密度の意味で使われるべきものです。
なお、解像度は、用紙の上に印刷するときには意味がありますが、インターネットのWebブラウザなど、画面表示ではあまり意味を持たないことがあります。つまり、ワープロに画像を配置するときには意味があるものの、ブラウザ上では意味を持たせることはあまりないと言えばよいでしょうか。
ブラウザでは、画像は単に画素の集まりとして指定します。これは、「基本的には画像の1画素は、ディスプレイの1画素に対応させる」という仮定があるからにほかなりません。いいかえれば、ビットマップ画像の解像度は、画面の解像度と同じであるという前提の上に成り立っているということです。深く考えなくてもいいといえばいいのですが、こうした状況は一度頭の中で整理をしておいてください。
さて、ビットマップ画像を構成する1つ1つの画素は色を持ちますが、色をどのように記録するのかということでは、いろいろな方式があります。代表的な方式は、RGBすなわち、赤緑青の色の強さをそれぞれ数値で記録するという方法です。各数値を8ビットで記録すると、1つの画素のデータを記録するのに24ビット（3バイト）が必要になります。このような数値を「深度」や「デプス」などと呼びますが、あまり一般的な用語ではありません。
まず、RGB各8ビットを割り当て、24ビットを利用した場合、組み合わせを考えれば、1600万ほどのバリエーションがあります。これは、人間の目が識別できる限界値くらいに達していることが実験的に裏付けられており、おおむね、実物を目で見た内容を、画像データとして再現できるということで「True Color」「Full Color」という言い方をします。通常は、これ以上の緻密さは求めなくても大丈夫なレベルということです。1つ1つの色は、256段階で変化できます。
一方、よりデータのサイズを小さくするために、デプスを下げるということが行われます。赤と青に5ビット、緑に6ビットを割り当てて、1画素が16ビット（2バイト）にすると、1画素の取りうるバリエーションは65000色あまりになります。これくらいだと、人間の目で見た場合、原画像との違いがわかる範囲に入ってくるのですが、通常はぱっと見にはわからないくらいではあります。
さらに、1画素を8ビット（1バイト）であらわすということも行われます。そうなると、たったの256通りのバリエーションしかなくなり、いろいろな色や明るさを等分割すると、原画像との違いはぱっと見でわかるほどになります。ただし、一般的には、8ビットカラーの場合、原画像との違いをなるべく少なくするために、256通りのバリエーションで、どんな色を使うのかというテーブルを別に持ちます。それを「カラーテーブル」と呼びます。実際に表示する色は24ビットつまり3バイトのデータとして持つのが一般的です。カラーテーブルは、
00000000 → R:00000000, G:00000000, B:00000000 （つまり黒）
00000001 → R:00000000, G:11111111, B:00000000 （つまり緑）
00000010 → R:00000000, G:00000000, B:11111111 （つまり青）
00000011 → R:11111111, G:00000000, B:00000000 （つまり赤）
00000100 → R:00000000, G:11111111, B:11111111 （つまり黄色）
00000101 → R:11111111, G:11111111, B:11111111 （つまり白）
のような対照表です。実際には、原画像で使われている色をなるべく含まれるように、テーブルを自動的に作るようなことをソフトウエアにさせます。
さらに、白黒の画像というものも使われますが、白黒なので、1つの画素には「明るさ」という変動しか存在しません。そのような場合、一般には1画素を再現するのに8ビット（1バイト）、すなわち256段階の明るさの変化が可能なようにします。これくらいだと、人間の目で見た場合、ほぼ直線的に変化するように見えます（段階的には見えないということです）。こうした画像を「グレースケール」などとも呼ばれます。
色に関してはこの程度は理解しておいてください。実際には人間の近くの問題も含み、いろいろと複雑です。
画像を処理するためのアプリケーションがもちろんあります。
まず、ベクターグラフィックスの処理は、前にも説明したとおり、最近ではワープロや表計算ソフトにその機能が含まれるのが一般的になっています。以前は専門ソフトがあり、「ドローソフト」などとも呼ばれていたのですが、そうしたソフトは主流ではなくなりつつあります。一方、専門家がベクターグラフィックスを作成するソフトは、現場ではかなり使われています。1つはデザイナーが使うソフトで「Illustrator」（Adobe Systems）が代表的です。ほかには、CAD（Computer Aided Design）としてくくられますが、機械製図や建築製図といったエンジニアリング分野のグラフィックス作成のソフトがあります。この分野についてもプロ向きのソフトが広く利用されています。
一方、ビットマップ画像についても専用のソフトはあるものの、Wordなどのように、ワープロなどである程度の処理ができてしまうものもあります。それでも、インターネットで公開する写真の加工などを行う用途はあるので、ビットマップ画像処理ソフトは入門者向けのものから、プロ向けのものまで多種多様なものがあります。この種のソフトは「レタッチソフト」などと呼ばれることがありますが、これは写真に手を加えるというphoto retouchという言葉から来ています。
ソフトによっては、ベクターグラフィックスとラスターグラフィックスの両方を処理できるようなものもあります。さらに最近は、インターネット向けの画像作成に特化したものもあります。
実際の画像処理を、PaintShop Proを使いながらデモをします。大体の流れを記載しておきますので、いっしょにやりながら確認をしましょう。
作業用の画像
画像データはファイルに保存されますが、そのときのデータ形式（フォーマット）について意識しないといけないことはよくあります。また、フォーマットは、画像データそのものにも影響があるので、適切な使い分けが必要です。
写真画像に適したファイルフォーマットで、フルカラーかグレースケールかで保存できます。データは圧縮されますが、非可逆圧縮が行えるため、非常にデータサイズは小さくなるというのが特徴です。圧縮は、人間の視覚特性を考慮するなどして、なるべく画像の劣化が少なくなるような工夫がされています。インターネットで見られる写真画像は、ほとんどがこのJPEG形式と言ってよいでしょう。
なお、JPEG画像をファイルに保存するときの規格がJFIFと呼ばれるものです。JPEG自体は本来はファイルフォーマットというよりも、画像データの1つの形式です。ただ、ファイルに保存しないと何もならないので、結果的にはファイルとして存在することになります。そのため、JPEGとJFIFは事実上同じ意味にとらえていても、ほとんど問題になりません。
JPEGには「プログレッシブJPEG」として、画像をじわじわと表示するような形式にもできます。インターネットでページを見るとき、画像データの取り込みに時間がかかります。すべてのデータを取り込まないと画像が表示できないようになっていれば、使い勝手は悪くなります。そこで、データの一部分を取り込むごとに、画像をある程度表示させるようなのがプログレッシブJPEGです。荒い画像から、データを取り込むにしたがって、本来の緻密な画像になるような形式が一般的です。
パソコン通信サービスのCompuServeで一般的に使われ始めた画像形式です。1画素を8ビットで表示する形式のビットマップグラフィックス向けのフォーマットです。圧縮も行うことができますが、この場合は可逆圧縮です。アニメのような画像や、構成図のような画像は、こちらのフォーマットの方が適しています。
GIFの特徴として、ある特定の色を透明にすることができます。このようなGIFファイルを「透過GIF」とか「透明GIF」などと呼んでいます。グラフィックスが四角形でなく、グラフィックスのデザインにあわせた形になっていてるようなのは、こうした透過GIFということが一般的です。GIF画像の中の、たとえば白の部分を透過させるような設定を行いますが、必ずしも白や黒でなくてもかまいません。画像で使われていない変な色でもかまわないわけです。画像の中で使われていない色を使うのが基本ですが、使われている色を指定して、中抜きのような効果を出すということもできます。
→こちらのページを見てください。
画像のサイズは、FrontPage Editorを使うにしても、HTMLを記述するにしても自由に設定できます。しかしながら、たとえば、64×48ドットの小さい画像を表示するのに、元画像が640×480ドットだったとしたら、それは非常に大きな無駄が生じます。インターネットでは、通信回線が必ずしも高速ではないので、こうした部分で余分な時間がかかるような結果になると望ましくありません。基本的には、Webページで実際に表示されるサイズにしたファイルを用意して、それをWebページに埋め込むのが基本です。
Windowsシステムでの標準的なビットマップ画像フォーマットとして、BMPがあります。圧縮できなくもないのですが、一般には圧縮されずに利用されるため、非常に大きなファイルサイズになってしまいます。フルカラーも可能ですが、デプスは可変です。
出版などで、高解像度のビットマップデータを扱うための、TIFFというフォーマットも存在します。もともと、高い解像度を目指して作られているため、プロの現場で問題なく扱えるデータとして定着しています。フルカラーでもグレースケールでもOKで、可逆な圧縮も可能ですし、圧縮しなくても使えます。
アニメーションは、画像を一定以上のスピードで切り替えることで、動画のように見せるというやり方の総称です。コンピュータでは、ほとんどが、ビットマップ画像を切り替えて動画を実現しています。
動画は、たとえばビデオで撮影した実画像や、文字とおりのアニメなどもありますが、本格的なものを作成するのはそれなりに道具をそろえないといけません。ビデオ画像の入力装置や、それらからビデオ画像編集を行うためのソフトなどいろいろ必要になります。これについては、回を改めて説明を行います。
インターネットのWebページで、アニメーションを手軽に行う方法として、GIFファイルフォーマットの拡張機能を利用した「アニメーションGIF」という手法があります。これは、複数のGIFファイルを1つのファイルに収めておき、適切な設定をしておけば、ブラウザで自動的にそれらの画像を切り替え表示をして、アニメーションを実現できるというわけです。1つ1つの画像は作成しなければならないものの、GIFなので手軽に作成することができます。GIF画像は、PaintShop Proなどを使って作成するのが基本です。
アニメーションを行うための画像をいくつか用意しておいたあと、GIF Construction Setというソフトを使えば、アニメーションGIFを作成することができます。
GIF Construction SetでのアニメーションGIFの使い方は、おおむね次のとおりです。
作成したアニメーションGIFは、そのファイルをWebブラウザにドラッグ&ドロップすることで表示することができます。ちゃんとアニメーションするかどうかは、この方法で確認するのが手軽でしょう。たとえば、ファイルをエクスプローラで表示しておき、それをインターネットエクスプローラのウインドウ内にドラッグ&ドロップします。
以下のように、素材をもとにして画像処理を行ってもらいますが、1〜4は結果をJPEGファイルにし、5はGIFファイルにして、課題提出ページで見えるようにしておいてください。
