フリーソフトで作るHP講座「画像表示1」

フリーソフトで作るホームページ講座「画像表示1」

前回までの分がうまくいくと文字だけでできたホームページ(以下HP)を皆に公開することができるようになっているはずです。しかし、文字だけでできたHPというのはまれで大抵写真や絵も表示されています。それではHPでこのような画像を表示する方法を説明しましょう。

まず表示したい画像ファイルを用意する必要があります。ただ画像ファイルには形式(ファイルフォーマット)が色々有ります。ブラウザではGIFとJPEG(最近ではPNGも)という形式が一般的に用いられますので、この形式で画像ファイルを用意する必要があります。デジカメやスキャナで画像を取り込む場合は大概JPEGで保存できると思いますので問題無いでしょう。自分でパソコン上で画像を作成する場合はWindowsに付いてくる「ペイント」等で文字や絵を描いてもビットマップという形式でしか保存できません。よってこれをGIF、JPEG、PNGに変換するソフトが必要になります。

それぞれの画像形式について特徴を以下の表にまとめました（これを知っておかないとどちらを使えば良いか悩んじゃいます）。

形式	長所	短所
GIF	透明色やインタレースをサポートしているアニメーションができる	256色しか表せない特許がらみで色々問題がある
PNG	GIFより圧縮率が高い GIFのような256色の制限がない透明色やインタレースをサポートしている(一部問題有り)	アニメーションができない古いブラウザでは表示できないネットスケープでは透明色が正常に動作しない
JPEG	多くの色を表現できる写真等では圧縮率が高い	文字等の圧縮には向かない

PNGはGIFの特許上の問題を解決する為に考案されたフォーマットです。従来GIFを使っていた用途にはPNGが使えるんですがブラウザにバグがあったり、古いブラウザでは対応していない、アニメーションができない(アニメーションGIFの代わりになるMNGというのが有るらしいのですがブラウザがまだ対応していない)等なかなか簡単には移行できません。I/Oh!の部屋でも徐々に移行を開始した所です。これらに関してはPNG普及プロジェクトJAPANが詳しいです。

それでは具体的な例で説明します。
以下が写真と文字の表示例です。
写真はJPEGの方が圧倒的に圧縮率が高いです。


JPEGファイルです。サイズは6KB。	JPEGファイルを256色に減色してGIF化。サイズは32KB。	JPEGファイルをそのままPNG化。サイズは38KB。	JPEGファイルを256色に減色しPNG化。サイズは17KB。

文字の場合はJPEGは圧縮率が低いです。PNGとGIFを比較すると、下の例では30%位PNGの方が良くなっています。綺麗さはPNGとGIFでは一緒ですが、JPEGはちょっとにじんでいます。

	JPEGファイルです。サイズは6KB。色がちょっとにじんでます。
	GIFファイルです。サイズは950バイト。
	PNGファイルです。サイズは646バイト。

次にGIFとPNGの特殊効果を説明します。

・透明色
前出の文字のGIFファイルは背景を黒にしていますが下のGIFファイルは背景が透明です。HPの背景をちょっと明るめの黒にしています。あなたの使っているブラウザがPNGの透明色を正しく処理できていれば以下の２つの画像では文字の背景とHPの背景は同じ色のはずです。正しく処理できていなければ前出の画像のように微妙に色の差がでているはずです。

	背景を透明にしたGIF画像。
	背景を透明にしたPNG画像。

・インターレース

GIFの例です。ジワジワと表示します。効果が判りにくければ左の画像をクリックした後、再読み込み(更新)をクリックしてみて下さい。PNGでもインターレースは機能するはずです（実際に試したことはないんですが... あまりインターレースは使わないんで）。

・アニメーションGIF
複数のGIFを連続して表示してアニメーションを行います。アニメーション化はまた別の回で説明します。

それではGIFやPNGへの変換方法を説明します。
PNGへの変換にはMIEditorを使います。営利使用はシェアウェアですが個人使用はフリーウェアです。 Vectorで入手できます。
GIFへの変換はFrontPage Expressが使えます。これはInternet Exproler5に付いています。 MicrosoftのサイトからもDownloadできますが数十MBなのでCDを探してくるのが現実的でしょう。ちょっと古い雑誌の付録を探すかMS-Office2000のCDに入っているのもInternet Exproler5です。 Internet Exproler5.5にはFrontPage Expressは付いていません。すでにInternet Exproler5以上をインストールしていると一端アンインストール（コントロールパネル->アプリケーションの追加と削除->「Microsoft Internet Explorer?とインターネットツール」を選択して「追加と削除...」をクリック->「以前のWindows構成に戻す」を選択してOKをクリック）してから Internet Exproler5をインストールして下さい。インストール方法でカスタムインストールを選んでFrontPage Expressをインストールする設定に変更する必要があります（標準ではインストールされません）。Internet Exproler5.5が使いたければ更にその上からインストールすればOKです。

必要なソフトをインストールできたらペイントを起動して適当に絵を作ってください。図のように絵を作ったら範囲を選択してメニューの「編集」の「コピー」でクリップボードに取り込んでください(余白を含まないように選択するのにちょっと苦労しますが ...)。

ではまずPNGファイルを実際に作ってみましょう。ここでMIEditorを起動してメニューの「ファイル」の「クリップボードから開く」を実行してください。すると左図のようになります。ここでメニューの「ファイル」の「別名保存...」でファイルを保存する場所を指定して拡張子を.pngにしたファイル名を設定するとPNGで保存されます。下図が保存したPNG ファイルです。

JPEGに変換したいときは拡張子を.jpgにして下さい。

次はGIFへの変換の仕方です。まず変換したいファイルをビットマップ形式で保存します。先程のPNG同様、ペイント等で絵を作って指定した範囲を保存します。ペイントには指定した範囲を保存することができないのでPNG同様にクリップボードを通してMIEditorに渡してファイル名の拡張子を .bmpにして保存します。
画像ができたらFrontPage Expressを起動してください。メニュの「挿入」の「画像...」で左図のプロパティが表示されます。今作った画像を選択して「種類」でGIFを選択してください。そして「OK」を押します。

PNGで作ったファイルをビットマップに直してFrontPage Express に取り込んだのが左図です。ここでメニュの「ファイル」の「名前を付けて保存...」のダイアログボックスを開き「ファイルとして保存...」ボタンをクリックします。そして適当な場所を指定してHTMLファイルを保存してください。同じ場所に先程の画像がGIFのファイルとして保存されます。いらないHTMLファイルを削除してGIFのファイルを好きな場所に移動してできあがりです。

やっとGIFファイルとPNGファイルができました。これをHPに表示するには<IMG SRC="ファイル名">を使います。以前作ったhello!と表示するサンプルにGIFとPNGの表示を追加したのが以下のサンプルです。

<HTML>
<HEAD>
</HEAD>
<BODY>
hello!
<IMG SRC="sample.gif">
<IMG SRC="sample.png">
</BODY>
</HTML>

ここをクリックするとサンプルが見れます。

さあ、なんとかこれで画像が表示できるようになりました。今回はここまでです。
画像に関してはアニメーションGIFや別のフリーソフトによる絵の作成を初中級編で説明したいと思います。
初級編ではあとハイパーリンクと表(TABLE)の説明を行う予定です。