2005-01-07
updated on 2008-08-21
わたしがウェブページ（いわゆるホームページ）に載せる画像ファイルを どのように作っているのかを簡単なメモにまとめるつもりで 書きはじめた文章ですが，画像ファイルの基礎知識まで 詰め込んでしまい，あんまり簡単ではなくなってしまいました．
写真だけでなくグラフなどの図を扱うことが多いかたを イメージして書きました．MS Windows 上で作業することを想定していますが， 画像形式の話など，他の OS を使っている場合にも参考になる部分があるかもしれません． 特定のアプリケーションに依存しない一般的なことを中心に書きましたが， PowerPoint での画像の貼りこみについても少しだけ書きました．
ビットマップ画像は点（画素やピクセル pixel と呼ぶ） のあつまりとして画像を扱うもの， ベクトル画像は図の描き方の命令（どの座標からどの座標へどんな太さの直線を描く というような）の集まりとして画像を扱うものです．
ビットマップ画像は拡大すると粗くなったり，縮小するすると細部がつぶれたり かすれたりします． 100×100ピクセルの画像を 500×500ピクセルに拡大したら， もとの１ピクセルの色をそのまま 5×5 の 25ピクセル全部に割当てるだけですから モザイク画像のようになってしまいます．また，幅が１ピクセルの線が書かれた 500×500ピクセルの画像を 100×100に縮小したら，幅 0.2 ピクセルの絵など 描けませんから，線はたぶんほとんど消えててしまうでしょう．
いっぽうベクトル画像の場合，スクリーンに表示する段階ではビットマップイメージ になっていますが，このイメージは表示したいサイズにあわせてソフトが毎回描き直します． サイズによって粗くなったりかすれたりといった心配はありません．
なお，ベクトル画像データにもとづいて描かれたものをビットマップ画像データ に変換することは簡単にできますが，いちどビットマップにしたものを ベクトル画像データに戻すことはできません．
画像を扱うときは，これらのことをつねに念頭においておく必要があります．
ビットマップ画像とベクトル画像については， SFC-CNS（慶応義塾大学 湘南藤沢キャンパス・キャンパスネットワークシステム） のサイト内の 画像の性質 によくまとまった説明があるので，ぜひごらんください．
フォント（文字の形をあらわす画像データ）にも ドットフォントとアウトラインフォント（ベクトルフォント）があります． 関西外国語大 短期大学部の上山清二さんが公開されている講義資料のなかに 簡潔で分かりやすい説明 アウトラインフォント と ドットフォントがあります． パソコン上でふつうに使われている TrueType フォントは，アウトラインフォントです．
文字情報に比べて，画像データは大きくなりがちです．400 × 300 ピクセルという 小さい画像でも12万点の色の情報が必要です．なるべく自然な色を表現しようとすると， １ピクセルあたりの色情報のサイズも大きくなります． 画像データをコンパクトにするさまざまな工夫がされて，いくつもの画像ファイル形式が 考案されてきました．それぞれに得意なこと・苦手なことがあります．
SFC-CNS（慶応義塾大学 湘南藤沢キャンパス・キャンパスネットワークシステム） のガイド中の， 画像ファイルの種類 のページに，簡潔なまとめがあります． ビットマップ画像とベクトル画像のちがい，可逆圧縮と非可逆圧縮のちがい， 色の表現方法の違いがポイントです．
ウェブにのせられるのは，JPEG, PNG, GIF です． これらの画像ファイルは，ブラウザの側で特別なことをしなくともふつうに 見られる可能性が高いのですが，これ以外の画像データは，対応する プラグインを組み込んだり，アプリケーションソフト（たとえば PDF なら Acrobat Reader）を立ち上げたりしないと見られません．
JPEG, PNG, GIFはいずれもビットマップ画像です． のせたい画像の種類により，下のような目安で適切な形式を選びます．
JPEG は不可逆圧縮をするので，いちど画質を落としてしまうと，もう元には 戻せません．また，色数が多い画像を GIF にすると色の質が低下しますが，これも 元にはもどせません．ファイル形式を変換するときは，これらのことにも要注意です．
PNG は，GIF 形式の特許を持っていたアメリカの会社が特許料を要求しはじめたのに 対抗して開発された歴史があります． GIF は特許切れにともなって（いまのところ）自由に使えるようになってます． くわしくは， GIF特許料徴収に対する抗議運動の呼びかけ や， 日本国内におけるLZW特許が失効 - GIFのロイヤリティーが不要に をご覧ください．
エクスプローラではファイル名の拡張子を表示するように，ファイルの表示方法は 「詳細」にしてファイルサイズが見えるようにしましょう． すでにそうなっている人や，これだけでなんのことだか分かる人は，以下の説明は飛ばして 次の節へ進んでください．
MS Windows ではファイル名の，ピリオドより後ろ部分．たとえば test.txt なら txt の部分を拡張子と呼び，これによってファイルの形式を区別する習慣があります． （もともとは UNIX の世界に由来します）． txt ならテキストファイルだとか，exe なら実行ファイル，dll なら ダイナミックリンクライブラリなどがその例です． さらに，さまざまなアプリケーションソフトが，そのソフトで作製・編集するファイルに 独自の拡張子をつけています．.jtd が一太郎，.xls が MS Excel というようにです．
また，MS Windows にはフォルダ内のファイルの一覧などを表示するツールである エクスプローラというものがあります．ウェブページを見るのに使う Internet Explorer とは別ものです． Windows のバージョンによりますが， デスクトップ上の「マイコンピュータ」をクリックしたり， スタートメニューからマイコンピュータを選ぶとエクスプローラが起動します．
このエクスプローラは，初期設定だとファイルの拡張子を表示しません． かわりに，その拡張子に対応したアプリケーションソフトを示すアイコン （小さな画像）が表示され，どのソフトが扱うファイルかを示しています． 拡張子で示されるファイル形式と，標準で扱うプログラムとの対応を Windows が 覚えていて，そのプログラムを表すアイコンを表示しているのです．
でも，どの形式のファイルをどのプログラムで扱うかは任意で，画像ファイルの場合， どんな画像ソフトをインストールしたかによって表示されるアイコンも変わってしまいます． 画像ファイルの形式を変換したりしながら作業するには，これでは不便です． また，自分の扱ってる画像ファイルのサイズが見えないと，知らずに巨大ファイルを 貼りつけてしまいがちです．
これを避けるためだけにも，拡張子を表示することと，表示形式はアイコンを並べる 形式ではなくて，ファイル名，ファイルサイズ，作成日などを表形式で 表示する「詳細」にしてください．
まず，エクスプローラのメニューの，[表示]→[詳細]で，ファイルサイズや更新日時を 表示させます．つづいて，[ツール]→[フォルダオプション]→[表示]で 出てくる詳細設定リストのまん中よりやや下，「登録されているファイルの 拡張子は表示しない」のチェックをはずすします． それから，「現在のフォルダ設定を使用」のボタンをクリックすると，以降はいつ エクスプローラを起動しても，拡張子を含めたファイル名と，サイズや更新日時が 表示されるようになります．
拡張子を表示することは，ほかにもさまざまなメリットがあります． 少なくとも自分でプログラムを書いてデータファイルをいじるような人は， ぜひこのように設定することをおすすめします．
世の中にはさまざまな画像編集ソフトがあります．最近はデジカメで撮影した 写真を加工するためのツールが増えていますが，まずは Windows に標準で入っている ペイント（mspaint）を使ってみましょう． ペイントは，ビットマップ画像の編集用のツールです． 読み込んだ画像を別形式に変換すること， 必要部分だけ切り出すこと，画素数（解像度）をかえることができます． スタートメニューのなかの[プログラム]中の[アクセサリ]あたりに入っているはずです． ショートカットを作ってすぐに起動できるところに置いておくのもよいでしょう．
画像ファイルを読み込んだり，クリップボード経由で画像を貼り付けてから， 名前をつけて保存するときに目的のファイル形式を選択すれば， 形式の変換ができます（BMP や GIF，Windows のバージョンによっては さらに JPEG, PNG, TIFF）．
画像全体の拡大・縮小には，メニューの[変形]→[伸縮と傾き]を使います．
画像のうち必要なところだけ取り出す手順を箇条書きにしてみます．
上の最後のステップで適当なサイズにするのはちょっとめんどうです． これを避けるには，[ファイル]→[新規]としたあと， [変形]→[キャンバスの色とサイズ]で，コピーした画像よりもあきらかに小さいサイズ （たとえばたてよこ１ピクセル）を指定します．そのあと貼り付けようとすると， キャンバスを大きくするか聞いてきます．ここで[はい]を選ぶと， 貼り付けたい画像ぴったりのサイズまでキャンバスが拡大され，余白が残りません．
なお，[変形]→[キャンバスの色とサイズ]は，いま読み込んでいる画像の大きさが 画素数にしてどれだけかを知るためだけにも利用できます．
私はペイントのほかにフリーソフトのBTJ32を愛用しています． これは，解像度の変更，不要部分の切り捨て，BMP, JPEG, PNG 形式の 相互変換ができます． JPEG で保存するときには， 画質も選択できます（高画質ほどファイルサイズは大きくなる）． BTJ32は， Vectorからダウンロードできます．
ソフトによって，編集中の画像や図をビットマップ形式でファイルに書き出せる 機能を持つものも多いようですが，使用ソフトにかかわらず使える方法があります． スクリーン上に表示された画像イメージは，いつでもそのままクリップボードに コピーできるます．これは Windows そのものの機能ですから，どんなソフトで 作業中かは無関係です．
キーボードの[PrtScrn]を押すと，画面全体のイメージがクリップボードにコピーされます． [ALT]を押しながら[PrtScrn]を押すと， その時点でアクティブな（一番手前に表示されている） ウインドウだけがコピーできます．多くの場合，こちらのほうが便利です．
作図ソフトで線や丸を組み合わせて描いた図だろうと，ワープロで作った文書だろうと， [ALT] + [PrtScrn] でコピーされるのはビットマップデータです． こうしてコピーしたデータをペイントに貼り付けてから余分な部分を切り捨て， 適当な形式に変換して，ウェブにのせます．
ここで言う画像の大きさとは，ピクセル（画素）の数でいくつ×いくつか， という意味です．当然，ピクセル数が多いほど，その画像のデータをしまった ファイルも大きくなります．
ネットワークでの画像データの転送は，文字情報よりもずっと時間がかかります． 自分のコンピュータ上や，職場の恵まれたネット環境ではスイスイ出てくる画像が， 電話回線や無線LAN 経由などでアクセスすると，表示までずいぶん待たされることがあります． だれにでもストレスなく見てもらえるページにするには，不必要な情報を 送らないことです．
大きい図のデータを転送してから img タグのサイズ指定（height 属性とwidth属性） でブラウザ側で縮小して表示しているページをときどき見ますが，これはたいへんムダです． どっちみち捨てる情報を時間をかけて送っていることになります． 1000 x 600 ピクセルの画像を送って，img タグのサイズ指定でたてよこそれぞれ 1/5， 200 x 120 ピクセルにして表示したら，必要量の 25倍もデータを送っています． また，グラフや模式図などの場合，大きな画像を送ってブラウザ側で縮小すると， 線がかすれたり文字がつぶれたりして見にくくなりがちです． たくさんデータを送って，かえって表示が汚くなるのではたまりません．
不必要に大きな画像データを載せておくことは，ウェブサーバのディスク容量を むだに消費するというマイナスもあります． プロバイダーのディスクスペースを借りてページを作っている場合は， たちまち割当てられた容量いっぱいになってしまうかもしれません． 高品質のデジカメ画像は１枚で１メガバイト以上になります． 割当て容量が100メガバイトだったら，写真を 100枚載せればいっぱいです．
私は HTML ファイルはすべてテキストエディタで書いているのですが， HTMLファイル作製ソフトのたぐいだと，どんな大きさのファイルをどれだけ （見た目だけ）縮小して表示しているのか意識せずに画像のサイズ合せを してしまっているかもしれません． HTML のソースを見てチェックしてください．
きれいな絵をむだなく見ていただくために， ブラウザ上で見せたい大きさぴったりの画像データを用意しましょう．
ぴったりサイズの画像を貼りつける場合でも IMG タグ中の height 属性と width 属性は 書いておきます．これらの属性が書かれていると，ブラウザは画像情報の転送をまたずに 画面上のものの配置を計算できるので，表示がはやくはじまります．これだけのことで， 遅いネットワークで見る人のストレスを減らすことができます．
グラフや模式図といったものは，たいていもとはベクトル画像です． どこにどんなものを配置するか，ソフトの側で計算してスクリーンに表示したり 印刷したりする画像イメージを作っています．ズームの倍率指定や，ウインドウ 全体の大きさをかえたりすることで，スクリーン上の表示サイズは変わりますが， そのたびに計算して描きなおしますから，つねにきれいな画像が表示されます．
ですから，その図を編集しているソフトにスクリーン上で適切な大きさの絵を 描かせて，これを[ALT] + [PrtScrn]でコピーして使えば， 適切な大きさできれいな画像ファイルができます．
大きなビットマップ画像を作ってしまってから縮小すると， 細部が潰れたりかすれたりします． 写真ならば気にならないところも，グラフや模式図ではとても目立ちます． ベクトル画像はベクトル画像のまま見せたい大きさにし， それからビットマップへ変換するようにしましょう．
この方法はどんなソフトで絵を描いていても通用します． また，ウェブで表示させる画像なら，スクリーン上で表示する以上の解像度 は不要ですので，これさえ覚えておけばまったく不都合はありません．
なお，ソフトによっては，描画した結果をビットマップ画像形式で 書き出せるものもあります．それで適切な大きさ・形式のファイルを作れるならば， もちろんそれでかまいません．
デジカメの写真やスキャナで読み込んだ画像など，最初からビットマップ形式に なっているものは，ペイントなりなんなりのビットマップ画像編集ソフトで 適切な大きさに加工して使います． JPEG で保存するとき，画質が調整できる場合には，出来上がり図を確認しながら 適当な画質を選びます．高画質にすればするほどファイルサイズは大きくなります．
JPEG 画像のうえに矢印だの文字だのを加えたいときは，画像サイズの 調整が終わってから，最後に書き込みます．ベクトル画像であるアウトラインフォントの 文字であっても，一度ビットマップ画像上に書き込んでしまえばもはや ビットマップ画像の一部です．拡大・縮小すれば粗くなったり潰れたりします．
適切な大きさの画像ファイルを用意するとよいのはウェブに限りません． プレゼン用ソフトのひとつ PowerPoint でも同様です． ウェブ用画像の話からは少々ずれますが，ときどき異様に肥大化した PowerPoint ファイルを見掛けるので，補足として書きました．
PowerPointのファイルに写真などのビットマップ画像データを貼り付ける場合， 大きな画像をスライド上でドラッグして縮小しても， データサイズは小さくなりません． もとのビットマップ画像のデータはすべて保持したまま， それをどのような大きさで表示するかという指示にしたがって 縮小して見せているだけです．デジカメで撮影した高画質で２メガバイトの画像を 10枚，それぞれ縮小して一枚のスライドに並べたら，それだけで 20メガバイトに なってしまいます．
不必要に大きなファイルを作らないに越したことはありません． 巨大ファイルは持ち運びや転送に不便なだけでなく， ファイルの読み込みや表示にも時間がかかります． コンピュータのメモリー容量に余裕がないと，ほとんど凍りついたように なることもあります． 自分のコンピュータ上では問題なく動いても， 発表会場備えつけのコンピュータに入れたら凍ってしまった， などということもあります． さらに，学会発表などで事前にプレゼンファイルを送る場合， ファイルサイズに制限があることもあります．
PowerPoint 中の画像のデータを必要なサイズに抑える方法は二つあります．
最初の方法は，ウェブ用の画像を用意するときと同様にしてできます． 2番目の方法は PowerPoint の機能を使ってかんたんにできます．
※この作業手順は PowerPoint 2003 に対応したものです．PowerPoint 2007/2008 の場合の手順は， 日本鳥学会2008年度大会の， 一般講演の詳細情報 に掲載されている パワーポイントファイルの作成について(PDF) で紹介されています．
解像度の変更で，[web/画面] をチェックすると画面での表示に 必要な解像度に調整されますし，[印刷] をチェックすると，印刷用の解像度（web/画面 用 よりも高い）に調整されます．プレゼン用のファイルで，印刷するとしても手もと資料程度 にしか使わないなら，高い解像度は不要ですから，[web/画面] 用の解像度にするのが よいでしょう． また，[設定の対象] を選択した図だけにするか，ファイル中のすべての 図にするかを選べます．解像度は気にせずにファイルを作ってしまってから，最後に まとめて解像度を調整すると楽でしょう．
なお，当然ですが，一度解像度を落としてしまった図をあとからドラッグして大きくしても， もとの解像度には戻りません． この点からも，解像度を落とす作業はあとに回したほうがよいでしょう．
解像度を変更する前と後とで，ファイルサイズの減り方がはかばかしくない場合， ファイル名を変えて保存すると小さくなることがあります． 同名で保存すると，編集前の状態がファイル中に残ってしまうが， 名前を変えるとこれが避けられるためではないかと推測しています（確かめていません）．
ベクトルデータとして貼りこめる画像はベクトルデータのままにしておくほうが ファイルサイズが小さくなりますし，あとから拡大・縮小しても画質が低下しません． Windows の場合， WMF (Windows Meta File) や EMF (Enhanced Meta File）というファイル形式があります． これも一種のベクトル画像データです（詳しくは Enhanced Meta File）． 元の図がベクトル画像で，EMF や WMF での保存が可能な場合は， これを経由して貼りつけると，ファイルサイズを抑えることができます．
ただし，何千もの点がプロットされたような図だと，ベクトル画像データとしても 大きなものになってしまいます（「ここにこんな点を書け」という命令が何千個も 並んだファイルになるから）．また，ビットマップ画像を EMF や WMF 形式で 保存すると，かえって巨大なファイルができてしまい逆効果です．