とほほの画像・音・動画入門

HOME > とほほのWWW入門 > とほほの画像・音・動画入門
1998年4月5日版
見直し中!!

目次

画像ファイル

HTMLでよく使用される画像ファイルにはGIFファイルJPEGファイルがあります。WindowsのBMPファイルはそのままでは貼り付けられないようです。一般的に、通常の画像はGIFファイルで、写真などはJPEGファイルで表示することが多いようです。各種画像ファイルの仕様書については下記のURLを参照してください。
http://www.dcs.ed.ac.uk/~mxr/gfx/

画像ファイルを用意するには

(1) ペイントブラシで作成する(Windows)
Windows95標準のペイントで作成するのが最もお手軽ですが、ビットマップ形式(*.BMP)はそのままでは表示できないので、ツールを用いてGIF形式に変換しなくてはなりません。 ツールは「とほほの厳選ツール集(イメージ編)」を参照してください。

(2) お絵描きソフトで作成する
Photoshop や Paint Shop Pro あたりが定番といったところでしょうか。フリーソフトでは HP あたりがよく利用されているようです。

(3) スキャナで読み込む
器材さえあればこれは簡単ですね。

(4) デジタルカメラで撮影する
最近では直接フロッピーに記録するデジタルカメラもあります。

(5) フリーの画材集を購入する
本屋さんのパソコン関係図書のコーナーに行けば、HTMLで使用できる画像集が何冊かCD-ROM付きで販売されています。 私も「Internet ホームページ用素材集CD-ROM」(インプレス社,3800円)を購入しました。

(6) インターネットでフリーの画像を手に入れる
インターネット上でも、いくつかのサイトでフリーの画像を公開しているところがあるようです。 フリーとは言っても、コピーライトの明示が必要な場合などがあるので気をつけてください。 ちなみに、私のホームページに含まれるすべての画像ファイルはフリー画像とします。 著作権は私が保持しますが、ご自由に配布、使用ください。

(7) 誰かに作ってもらう
趣味で作っているひとや、仕事で作っているひとを見つけましょう。 Web上で作成サービスをやっているサイトもあるようです。

GIFファイル

Graphics Interchange Formatの略で、米国CompuServeでよく使用されていたフォーマットです。

GIFは内部フォーマットとしてUnisys社の特許を使用しています。(→GIFの特許に関する注意

古いGIFの仕様は単なる静止画像でしたが、新しい仕様のGIF89aでは、次に述べる透過GIF, GIFアニメーションなどをサポートしています。

BMPをGIFに変換するには

Windowsで一般に用いられるBMPファイルをホームページに貼り付けるには次のようなツールを用いてGIFに変換する必要があります。 この他に MS Word を用いて、文書にBMPを貼り付けて、[ファイル]→[名前を付けて保存]からHTMLに変換して保存するという技もあるそうです。

xxx.bmpをファイル名だけxxx.gifに変更して貼り付けた人が居たのですが、それでも IE はちゃんと表示するのでビックリ!!

透過GIF

GIFの画像の任意の一色を透明にするものです。

透過GIFは、GIF89aという規格で拡張されました。 画像ファイルとマスクファイルの2倍のファイルサイズになるかと思っていたら、 背景色情報しか持っていないようで、数%しか増加がありませんでした。 転送時間はほとんど変わらないようです。

透過GIFを扱えるツールについては「とほほの厳選ツール集(イメージ編)」を参照してください。ここでは、各ツールの使用方法について説明します。

D-Pixed Ver2.09 (Windows)
GIF形式で保存する際に[透明化GIF]をチェックし、[スポイト]で透明色を選ぶ。

GIXPro V2.13 (Windows)
[変換]→[フォーマット]→[GIF]を選び、[変換]→[オプション]で[透明化]をチェックし、十字ポインタを背景色にしたい色の箇所までドラッグ&ドロップする。

Graphic Converter (Macintosh)
ツールボックスパレット右下の杖の形のツールで透明にしたい部分をクリックして保存する。

Happy Paint for Web (Windows)
[ファイル]→[保存]→[GIF保存]ダイアログで、[透過GIFで保存]をチェックする。 透過できる色は白か黒か、または[ツール]→[マスク編集]でマスクをかけた部分かを指定する。

LView Pro 1.D2 (Windows)
[Retouch]→[Background color...]で透明にしたい色を選択した後、[File]→[Save as...]でファイルの種類を[GIF 89a (*.gif)]にして保存する。

LView Pro Ver2.0 (Windows)
スポイドのボタン([Color Dropper])をクリック。 Altキーを押しながら透過させたい色をクリック。 フレームのボタン([Frames])でFramesツールバーを表示。 黒のT字ボタン([Use Transparency])をクリック。 [File]→[Save As...]でファイルの種類を[GIF 87a/89a(*.gif)]に、[File Type Options]→[GIF89a]を選択し、[Save Transparent color information]にチェックして保存する。

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]を チェックしてセーブする。

Transparency (Macintosh)
画像をマウスでクリックするとカラーパレットがポップアップするので、透明にしたい色を選んで保存する。

インタレースGIF

画像を表示する際にまず荒い画像を表示して、だんだんと鮮明な画像に変わっていく仕組みです。 ファイルのサイズはほとんど変わらないのですが、これを使用すると重たく感じるのは気のせいなのかな。

インタレースGIFを扱えるツールについては「とほほの厳選ツール集(イメージ編)」を参照してください。ここでは、各ツールの使用方法について説明します。

GIXPro V2.13 (Windows)
[変換]→[フォーマット]→[GIF]を選び、[変換]→[オプション]で[インターレース]をチェックして保存する。

Happy Paint for Web (Windows)
[ファイル]→[保存]とすると[GIF保存]ダイアログが表示されるので、[インターレース保存]をチェックして保存する。

LViewPro Ver2.0 (Windows)
[File]→[Save As...]でファイルの種類を[GIF 87a/89a(*.gif)]に、[File Type Options]で[GIF89a]を選択し、[Use interlaced format]にチェックして保存する。

Paint Shop Pro 3.11 (Windows)
[File]→[Save As...]でTypeを[GIF - CompuServe]に、 Sub-Formatを[Version 89a - Interlaced]にしてセーブすればOK。

GIFアニメーション

「GIFアニメーション」「GIFアニメ」「アニメGIF」「アニメーテッドGIF」などいろいろ呼ばれます。 複数のGIFファイルを連結して簡易的な動画を実現するものです。 基本的には2コマの動画を作成するには2倍の、3コマは3倍のファイルサイズとなるので、画面は重くなりがちです。

GIFアニメを作るのは楽しいですが、見る側にとって鬱陶しく(しかも重い)思われないよう適度に使用してください。

いくつかのツールの使用方法を紹介しますが、その他のGIFアニメーションを扱えるツールについては「とほほの厳選ツール集(イメージ編)」を参照してください。

Giam (Windows)
左側の[コマ表示窓]に画像ファイルをいくつかドラッグ&ドロップし、[ファイル]→[名前を付けて保存]するだけ。超簡単。CtrlやShiftキーを押しながらファイルを複数選択すれば、ウェイト時間なども一括で変更できるし、画像サイズを可能な限り小さくする(書き換えなくてもよい部分の画像を自動カットしてくれる)機能も備えているので、一番オススメ。(昔はフリーソフトだったのが、Unisys社の特許問題のために有料となったのが残念)

GIF Construction Set (Windows)
多くの書籍やホームページで紹介されている割には、操作が難しいです。
  1. まず、動画の枚数分GIFファイルを用意してください。 ここでは2枚と仮定します。 GIF89aという新しい形式のGIFファイルでないとうまくいかないかもしれません。
  2. Gif Construction Setを起動してください。
  3. [Insert]→[Loop]、 [Insert]→[Control]、 [Insert]→[Image]→[ひとつめのGIFファイル]→[Use this image...]→[OK]、 [Insert]→[Control]、 [Insert]→[Image]→[ふたつめのGIFファイル]→[Use this image...]→[OK] とクリックしていき、ウィンドウ上に HEADER, LOOP, CONTROL, IMAGE, CONTROL, IMAGE の順にアイテムが並ぶようにしてください。
  4. [HEADER ...]をダブルクリックして、[Screen width], [Screen depth]を GIFファイルの大きさにあわせてください。
  5. [LOOP]をダブルクリックしてループ回数を指定してください。
  6. [CONTROL]をダブルクリックして[Delay]に書き換え時間を指定してください。 [Remove by]は[Background]にしてください。 透過GIFにする場合は[Transparent color]をチェックし、 スポイドで透過したい色を選んでください。 もうひとつのCONTROLにも同様の操作を行ってください。
  7. [View]ボタンで試して見ることができます。右クリックで終了します。
  8. [File]→[Save as...]でセーブし、ブラウザで表示してみましょう。

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の手順と同じ。

JPEGファイル

Joint Photographic Experts Groupという団体が標準化したものです。 フルカラーの画像を扱う時にはGIFにくらべて圧縮率が高いのが特徴です。 ただし色数の少ない画像はGIFのほうが奇麗だし圧縮率もよいです。 圧縮のために情報量を欠落させることがあります。 簡単なイラストや図形はGIF、複雑なイラストや写真はJPEGを使用するのが基本だと覚えてください。

JPEGを扱えるツールについては「とほほの厳選ツール集(イメージ編)」を参照してください。

プログレッシブJPEG

プログレッシブJPEGは、インタレースGIFのJPEG版みたいなもので、最初ぼんやりした画像が、次第に鮮明な画像が表示されるものです。
GIXPro V2.13 (Windows)
[変換]→[フォーマット]→[JPEG]を選び、[変換]→[オプション]で[プログレッシブJPEG]をチェックして保存する。

LViewPro Ver2.0 (Windows)
[File]→[Save As...]でファイルの種類を[JPEG JFIF (*.jpg, *.jpeg, *.jfif)]に、[File Type Options]で[Use progressive JPEG Compression Format]をチェックして保存する。

Paint Shop Pro Ver4.12 (Windows)
[File]→[Save As...]で[File Type]に[JPG...]を、[Sub type]に[Progressive Encoding]を指定して保存する。

その他
とほほの厳選ツール集(イメージ編)を参照。

減色

画像ファイルは減色することにより、 ファイルサイズを小さくすることで転送時間を短くしたり、 色数の少ないディスプレイでもそれなりに表示できるようにすることができます。
GIXPro V2.13 (Windows)
[変換]→[カラー 増色/減色]で減色して保存する。

pag1テトラへドロン (Windows)

Paint Shop Pro (Windows)

LViewPro Ver2.0 (Windows)
[Images]→[Color Depth...]で、Palette basedを選択。

色(RGB)について

とほほの色入門・色見本」を参照してください。

画像ファイルに関する注意

画像ファイルは小さく
あたりまえのことかも知れませんが、画像ファイルはできるだけ小さくしましょう。 無駄な画像や動画はカットしたり、減色したりしてみてください。

表示サイズを小さくしても表示速度は変わらない
IMGタグのWIDTHやHEIGHT属性で見かけ上の表示サイズを小さくしても、 ファイルサイズは変わらないので表示速度は変わりません。 画像を縮小表示する際は、お絵描きソフトなどで、 ファイル自体の大きさを小さくしてから貼り付けましょう。

256色でのチェックを忘れずに
Windowsの場合、16bit High Color モードでは奇麗に見えていた画像も、 256色モードで見て見ると、 全然違った配色になってしまいがっかりすることがあります。 特に背景はわずかの色の変化が文字の読みやすさに多大な影響をあたえるので、 一度256色モードでのチェックをお勧めします。 16色パレット216色パレットに存在する色のみを使用して作成すると、フルカラーモードでも256色モードでも変化の無い画像を作成することができます。

HEIGHT,WIDTHをつけましょう
<IMG>タグを使用する時はできるだけ HEIGHT,WIDTH属性をつけるようにしましょう。 これをつけるだけで、体感的な読み込み速度が違ってきます。

ALTをつけましょう
<IMG>タグにはALT属性で名前をつけるようにしましょう。 テキストのみの表示でブラウザを使用している人や、 画像ファイルの読み込み途中でも、 画面全体のレイアウトや構成が把握できるようになります。

同じ中身のファイルを別の場所に置かない
中身が同じ画像ファイルは複数の場所には置かないようにしましょう。 同じ中身でも場所が異なるとブラウザは再度読みにいきますが、 同じ場所の画像であればキャッシュされたデータを表示するはずです。

背景画像に関する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属性によってテキストモード表示でも意味が分かるし、はっきり言ってオススメです。

音について

Internet Explorer 2.0は標準で WAVEファイル(*.WAV)などを再生する機能を備えています。 詳しくは <BGSOUND> タグを参照してください。

Netscape Navigatorではプラグインの追加により音の再生が可能だそうです。 RealAudioTrueSpeechPlainTalkなどの技術があるそうですが、 こちらのほうはごめんなさい、まだ不勉強です。(^_^;)

でも、基本的にはホームページで音を鳴らすのは嫌いです。 初めて聞いた時には「へぇ〜」と思いましたが、2回目からは鬱陶しいだけなんだもんなぁ。


Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )