とほほの画像入門とほほの画像入門HTMLでよく使用される画像ファイルにはGIFファイルとJPEGファイルがあります。WindowsのBMPファイルはそのままでは貼り付けられないようです。一般的に、通常の画像はGIFファイルで、写真などはJPEGファイルで表示することが多いようです。各種画像ファイルの仕様書については下記のURLを参照してください。http://www.dcs.ed.ac.uk/~mxr/gfx/
(1)ペイントブラシで作成する： Windows95標準のペイントで作成するのが最もお手軽ですが、ビットマップ形式(*.BMP)はそのままでは表示できないので、ツールを用いてGIF形式に変換しなくてはなりません。ツールは「とほほの厳選ツール集(イメージ編)」を参照してください。(2)お絵描きソフトで作成する： Photoshop や Paint Shop Pro あたりが定番といったところでしょうか。フリーソフトでは HP あたりがよく利用されているようです。
(3)スキャナやデジタルカメラを用いる： 私自身はスキャナやデジタルカメラは持っていないので詳しくないですが、器材さえあればこれは可能ですね。単に読み込むだけでなく、見栄えが我慢できる程度にファイルサイズが小さくなるように減色するなどを試してみましょう。
(4)フリーの画材集を購入する： 本屋さんのパソコン関係図書のコーナーに行けば、HTMLで使用できる画像集が何冊かCD-ROM付きで販売されています。私も「Internet ホームページ用素材集CD-ROM」(インプレス社,3800円)を購入しました。
(5)インターネットでフリーの画像を手に入れる： インターネット上でも、いくつかのサイトでフリーの画像を公開しているところがあります。フリーとは言っても、コピーライトの明示が必要な場合などがあるので気をつけてください。ちなみに、私のホームページに含まれるすべての画像ファイルはフリー画像とします。著作権は私が保持しますが、ご自由に配布、使用ください。
(6)誰かに作ってもらう： 趣味で作っているひとや、仕事で作っているひとを見つけましょう。Web上で作成サービスをやっているサイトもあるようです。
(7)プログラム的に作成する： GDという、GIFファイルを生成するプログラムがあります。これを用いて、データを読み込んで折れ線グラフのGIFファイルを生成するCGIスクリプトを設置する・・・などが可能になります。
(→ GD: http://www.boutell.com/gd/)
Graphics Interchange Formatの略で、米国CompuServeでよく使用されていたフォーマットです。現在ではホームページで最もよく用いられている画像フォーマットでしょう。古いGIFの仕様は単なる静止画像でしたが、新しい仕様のGIF89aでは、次に述べる透過GIF, GIFアニメーションなどをサポートしています。ちょっと、GIFファイルの構造について調べたことがあったので、その時のメモをちょっとまとめてみました。(→とほほのGIF解析)
GIFは内部フォーマットとしてUnisys社の特許を使用しています。この特許問題はとんでもない方向に進んでいますので、GIF画像を扱うすべての人は、「GIFの特許問題について」に目を通しておいてください。
Windowsで一般に用いられるBMPファイルをホームページに貼り付けるには次のようなツールを用いてGIFに変換する必要があります。 この他にWordやFrontPageを用いて、文書にBMPを貼り付けてHTMLモードで保存することにより、BMP→GIF変換するという技もあるそうです。xxx.bmpをファイル名だけxxx.gifに変更してもGIFファイルにはならないので注意してください。(それでもInternet Explorerではちゃんと表示できてしまったのでビックリ)
透過GIFはGIFの画像の任意の一色を透明にするもので、GIF89aという規格で拡張されました。画像ファイルとマスクファイルの２倍のファイルサイズになるかと思っていたら、背景色情報しか持っていないようで、数%しか増加がありませんでした。転送時間はほとんど変わらないようです。透過GIFを扱えるツールについては「とほほの厳選ツール集(イメージ編)」を参照してください。ここでは、各ツールの使用方法について説明します。(1)D-Pixed Ver2.09 (Windows) GIF形式で保存する際に[透明化GIF]をチェックし、[スポイト]で透明色を選ぶ。
(2)GIXPro V2.13 (Windows) [変換]→[フォーマット]→[GIF]を選び、[変換]→[オプション]で[透明化]をチェックし、十字ポインタを背景色にしたい色の箇所までドラッグ＆ドロップする。
(3)Graphic Converter (Macintosh) ツールボックスパレット右下の杖の形のツールで透明にしたい部分をクリックして保存する。
(4)Happy Paint for Web (Windows) [ファイル]→[保存]→[GIF保存]ダイアログで、[透過GIFで保存]をチェックする。 透過できる色は白か黒か、または[ツール]→[マスク編集]でマスクをかけた部分かを指定する。
(5)LView Pro 1.D2 (Windows) [Retouch]→[Background color...]で透明にしたい色を選択した後、[File]→[Save as...]でファイルの種類を[GIF 89a (*.gif)]にして保存する。
(6)LView Pro Ver2.0 (Windows) スポイドのボタン([Color Dropper])をクリック。Altキーを押しながら透過させたい色をクリック。フレームのボタン([Frames])でFramesツールバーを表示。黒のＴ字ボタン([Use Transparency])をクリック。[File]→[Save As...]でファイルの種類を[GIF 87a/89a(*.gif)]に、[File Type Options]→[GIF89a]を選択し、[Save Transparent color information]にチェックして保存する。
(7)Paint Shop Pro 3.11 (Windows) スポイドの右クリックで背景色を指定し、[File]→[Save As...]でTypeを[GIF - CompuServe]に、Sub-Formatを[Version 89a - ...]にし、[Options]→[Set the Transparency Value to the Background Color]をチェックしてセーブする。
(8)Transparency (Macintosh) 画像をマウスでクリックするとカラーパレットがポップアップするので、透明にしたい色を選んで保存する。
画像を表示する際にまず荒い画像を表示して、だんだんと鮮明な画像に変わっていく仕組みです。ファイルのサイズはほとんど変わらないのですが、これを使用すると重たく感じるのは気のせいでしょうか。インタレースGIFを扱えるツールについては「とほほの厳選ツール集(イメージ編)」を参照してください。ここでは、各ツールの使用方法について説明します。(1)GIXPro V2.13 (Windows) [変換]→[フォーマット]→[GIF]を選び、[変換]→[オプション]で[インターレース]をチェックして保存する。
(2)Happy Paint for Web (Windows) [ファイル]→[保存]とすると[GIF保存]ダイアログが表示されるので、[インターレース保存]をチェックして保存する。
(3)LViewPro Ver2.0 (Windows) [File]→[Save As...]でファイルの種類を[GIF 87a/89a(*.gif)]に、[File Type Options]で[GIF89a]を選択し、[Use interlaced format]にチェックして保存する。
(4)Paint Shop Pro 3.11 (Windows) [File]→[Save As...]でTypeを[GIF - CompuServe]に、 Sub-Formatを[Version 89a - Interlaced]にしてセーブすればOK。
「GIFアニメーション」「GIFアニメ」「アニメGIF」「アニメーテッドGIF」などいろいろ呼ばれます。複数のGIFファイルを連結して簡易的な動画を実現するものです。 基本的には２コマの動画を作成するには２倍の、３コマは３倍のファイルサイズとなるので、画面は重くなりがちです。GIFアニメを作るのは楽しいですが、見る側にとって鬱陶しく(しかも重い)思われないよう適度に使用してください。いくつかのツールの使用方法を紹介しますが、その他のGIFアニメーションを扱えるツールについては「とほほの厳選ツール集(イメージ編)」を参照してください。
(1)Giam (Windows) 左側の[コマ表示窓]に画像ファイルをいくつかドラッグ＆ドロップし、[ファイル]→[名前を付けて保存]するだけ。超簡単。CtrlやShiftキーを押しながらファイルを複数選択すれば、ウェイト時間なども一括で変更できるし、画像サイズを可能な限り小さくする(書き換えなくてもよい部分の画像を自動カットしてくれる)機能も備えているので、一番オススメ。(昔はフリーソフトだったのが、Unisys社の特許問題のために有料となったのが残念)
(2)GIF Construction Set(Windows) 多くの書籍やホームページで紹介されている割には、操作が難しいです。ここでも、長々と操作法を説明していたのですが、これを使うくらいならGiamの方がオススメということで、説明を削除しました。
(3)LView Pro Ver2.0 [Frames]ボタンで、現在アクティブなイメージが第一フレームになるので、以後のフレームを追加して行く。 新規のイメージを追加する時は[Insert new]ボタン、既に保存されているイメージを追加する時は[Insert existing]ボタン、今のイメージと同じイメージを追加する時は[Insert clone]ボタン。 表示時間を変更する場合は、[Duration]を変更する。 表示順、繰り返し回数を変更する時は[Images]→[Animation...]で行う。 [Play]ボタンを使うと、試して見る事ができる。 [File]→[Save As...]でファイルの種類を[GIF 87a/89a(*.gif)]に、[File Type Options]で[GIF89a]を選択する。 透過にする時は、透過GIFの手順と同じ。
Joint Photographic Experts Groupという団体が標準化したものです。 フルカラーの画像を扱う時にはGIFにくらべて圧縮率が高いのが特徴です。 ただし色数の少ない画像はGIFのほうが奇麗だし圧縮率もよいです。 圧縮のために情報量を欠落させることがあります。 簡単なイラストや図形はGIF、複雑なイラストや写真はJPEGを使用するのが基本だと覚えてください。JPEGを扱えるツールについては「とほほの厳選ツール集(イメージ編)」を参照してください。
プログレッシブJPEGは、インタレースGIFのJPEG版みたいなもので、最初ぼんやりした画像が、次第に鮮明な画像が表示されるものです。ツールについては「とほほの厳選ツール集(イメージ編)」を参照してください。(1)GIXPro V2.13 (Windows) [変換]→[フォーマット]→[JPEG]を選び、[変換]→[オプション]で[プログレッシブJPEG]をチェックして保存する。
(2)LViewPro Ver2.0 (Windows) [File]→[Save As...]でファイルの種類を[JPEG JFIF (*.jpg, *.jpeg, *.jfif)]に、[File Type Options]で[Use progressive JPEG Compression Format]をチェックして保存する。
(3)Paint Shop Pro Ver4.12 (Windows) [File]→[Save As...]で[File Type]に[JPG...]を、[Sub type]に[Progressive Encoding]を指定して保存する。
画像ファイルは減色することにより、 ファイルサイズを小さくすることで転送時間を短くしたり、 色数の少ないディスプレイでもそれなりに表示できるようにすることができます。(1)GIXPro V2.13 (Windows) [変換]→[カラー 増色/減色]で減色して保存する。
(2)pag1テトラへドロン (Windows)
(3)Paint Shop Pro (Windows)
(4)LViewPro Ver2.0 (Windows) [Images]→[Color Depth...]で、Palette basedを選択。
(1)画像ファイルは小さく： あたりまえのことかも知れませんが、画像ファイルはできるだけ小さくしましょう。無駄な画像や動画はカットしたり、減色したりしてみてください。(2)表示サイズを小さくしても表示速度は変わらない： IMGタグのWIDTHやHEIGHT属性で見かけ上の表示サイズを小さくしても、ファイルサイズは変わらないので表示速度は変わりません。画像を縮小表示する際は、お絵描きソフトなどで、ファイル自体の大きさを小さくしてから貼り付けましょう。
(3)256色でのチェックを忘れずに： Windowsの場合、16bit High Color モードでは奇麗に見えていた画像も、256色モードで見て見ると全然違った配色になってしまいがっかりすることがあります。特に背景はわずかの色の変化が文字の読みやすさに多大な影響をあたえるので、一度256色モードでのチェックをお勧めします。基本16色パレットと216色パレットに存在する色のみを使用して作成すると、フルカラーモードでも256色モードでも変化の無い画像を作成することができます。
(4)HEIGHT,WIDTHをつけましょう： <IMG>タグを使用する時はできるだけHEIGHT,WIDTH属性をつけるようにしましょう。これをつけるだけで、体感的な読み込み速度が違ってきます。
(5)ALTをつけましょう： <IMG>タグにはALT属性で名前をつけるようにしましょう。テキストのみの表示でブラウザを使用している人や、画像ファイルの読み込み途中でも、画面全体のレイアウトや構成が把握できるようになります。
(6)同じ中身のファイルを別の場所に置かない： 中身が同じ画像ファイルは複数の場所には置かないようにしましょう。同じ中身でも場所が異なるとブラウザは再度読みにいきますが、同じ場所の画像であればキャッシュされたデータを表示するはずです。
(7)背景画像に関するMac版Netscapeのバグ： Macintoshの一部機種でNetscape 3.02以下のバージョンを使用している場合、かつ、32000色以上のモードで、64×64ピクセル未満の画像を貼り付けた場合、画像が真っ黒に見えることがあるそうです。小さな背景画像を使用される場合はご注意ください。(1998.4.5追記)
クリッカブルマップとは、 ひとつの画像の中のクリックした場所によってジャンプ先を変更する機能です。 クリッカブルマップを実現するには次のような方法があります。
(1)サーバーサイドクリッカブルマップ： サーバーの種類によって若干方法が異なります。また、画面上のどこをクリックすればどこにジャンプするのかブラウザ側に明示できません。この方法は、私はあまり好きではないので、説明はしません。
(2)クライアントサイドクリッカブルマップ： Netscape 2.0, Internet Explorer 3.0 以降ではHTML文書の中にクリッカブルマップの指定を行うことができます。詳しくは <MAP>タグの説明を参照してください。
(3)単に絵を並べる方法： なんのことはない、<IMG>タグで均等の高さの矩形画像を隙間無くイメージを並べるだけです。クリッカブルマップと呼ぶにはお粗末ですが、サーバーやブラウザの種類を問わないし、ALT属性によってテキストモード表示でも意味が分かるし、はっきり言ってオススメです。以下に例を示します。行末に <!--、行頭に --> を書くのは、改行時に画像間に隙間をあけないためのテクニックです。また、ブラウザの横幅が狭い時に画像と画像の間が自動改行されてしまうのを防ぐために、<NOBR>を用いましょう。