Powered by SmartDoc

6 前回の続き

6.1 続 色にまつわるお話

6.1.1 Webで色を指定する方法

RGBの値で指定,色の名前で指定

色はHTML要素の属性として指定できる

色の指定のような「見た目」の指定は,HTML本文ではなくスタイルシートで指定するのが正しいやり方(スタイルシートは後で学びます)

6.1.2 インデックスカラー

これはとても面白いやり方です.画像データそのもの以外に,その画像で使われているすべての色を集めたカラーマップ(カラーパレット)という色の索引(インデックス)を別に用意します.そして各ピクセルには色を書かずにこの索引を参照します.つまり各ピクセルには,パレットの何番の色を使っているかという番号だけが書かれています.

たとえば256色のカラーマップを用意してこの256色だけで絵を書くことにすれば,ピクセルごとに色データを保持する必要がない分だけ,画像全体のデータ量が減ります.

Gimpでも,カラーパレットの色だけを使って絵を書いたり,インデックスカラーで画像を保存したりすることができます.後述するGIFがこの形式で色を保存します.

6.2 アナログとデジタル

Gimpで作った画像(絵)はデジタルデータ

「アナログ情報と デジタル情報」が参考になる.

6.3 ビットマップ画像とベクトル画像

ビットマップ画像(ペイント系画像)
画像をpixel(画像のデジタルデータの最小単位の点)の集合として扱う方式.コンピュータのディスプレイを虫眼鏡で拡大してみると,色つきの小さな点が集まって絵になっているのがわかる.写真や芸術的な絵など,微妙な色が交じり合っている画像をコンピュータで扱うのに適している形式.Windows標準の「ペイント」やAdobe社のPhotoshopなどがこの画像形式を扱える.大学の情報処理教室では,GIMP(やXPaint)がこの形式を扱える.
ベクトル画像(ドロー系画像)
ベクトル画像は,点の集合ではなく,絵を構成する部品の集まりで画像を作っている.たとえば赤い円は,「中心が画像上の座標(28,64)にある半径5cmの円.線は幅1mmの赤色.」と言う指示が画像データに書いてあるだけで,画面上に出力されている赤い円は,この命令に基づいてアプリケーションが画面に書き込んだだけである.したがって,ベクトル画像を拡大縮小しても,形が崩れたり線ががたがたになることがない.また,各部品が独立の命令として存在しているため,円と四角が重なった絵の円だけを移動したり色を変えたりすることも簡単である.部品の集合として絵を扱うので,図表やイラストなどをコンピュータで扱うのに適している形式.つまり,卒業論文に使う図などはベクトル画像にしたほうが扱いやすい.Adobe社のIllustratorがこの画像形式を扱える.大学の情報処理教室では,XfigやTgifがこの形式を扱える.

GIMPとXfigを使って両者の違いをお見せします.

6.4 静止画像のデータ形式

よく使われる静止画像のデータ形式は,「SFC CNSガイ ド2002;2.2章 画像ファイルの種類」をご覧ください.

特に重要なビットマップ形式をまとめておきます.

GIF [圧縮]
Webや電子メールで画像を転送するのに適した形式であるが,圧縮アルゴリズムに特許があるので注意が必要(つまり,特許料を支払ったアプリケーションしかGIF画像を作成できない.そのため,GIMPのようなオープンソフトは標準ではGIFを扱えない.).インデックスカラーを使うので256色までしか扱えないがファイルサイズが小さい.背景を透明化してWebに貼り付けたり,インターレスで表示したりできるので使い勝手が良い.使用する色数を減らせばファイルサイズも小さくなる.JPEGと違って,文字が多い画像を扱うのにも適している.簡単なアニメーションも作れる.
JPEG [(通例)非可逆圧縮]
皆さんおなじみの画像形式.デジカメの写真もこの形式で保存するものが多い.色数を減らさずに保存できるので写真などに適している.圧縮率がよいのが特徴.ただし,圧縮率を上げる代わりに非可逆圧縮をするので元には戻せない.つまり,画像ファイルの生データはTIFFやBMPで扱い,編集済みの最終作品をJPEGで保存するのが適切な使い方.
PNG [圧縮]
GIFの代わりとして開発された形式.一部PNGを表示できないWebブラウザがある.
BMP [圧縮]
Windows標準のビットマップ画像形式.可逆圧縮なので元データが失われない.
TIFF [(非)圧縮]
機種が異なるコンピュータ間でビットマップ画像を交換することを目的として開発されたので汎用性があり(ただししばしばこの規格の柔軟性が災いして互換性がない場合もある),FAXやスキャナーやデジタルカメラの出力をこの形式で保存することが多い.データを圧縮して保存することもできる.

6.5 GIF画像の例

(1)