オンラインテキスト目次
Webページの作成目次

mizutani@rsch.tuis.ac.jp
参考書『インターネット時代のコンピュータリテラシー』(水谷正大、共立出版)

画像ファイルの張り込み


目次

インライン画像
画像タグのオプション
画像ファイルを乱用しない

目次

インライン画像

Webページに画像を張り込むには、次の画像ファイルのインライン読込みタグを使う:

<img src="画像ファイルのURL" alt="代替文字列" align="位置">

拡張子が .gif であるGIF形式はライセンスの関係ではあまり使われない傾向にある。
リンクする画像のファイル形式は拡張子が .png の(W3Cで標準化された)PNG形式や .jpg であるJPEG形式のものが広く使われる。

Webページで画像を張り込む場合には次の点に注意する。

目次

画像タグのオプション

タグ<img ..>のオプションalign="位置"は画像位置を制御ずる:

オプション意味補足
align="left" 画像を左側に寄せ、右側にテクストを回り込ませる <br clear="left">を回り込みテキストの最後に置いて回り込みを解除する
align="right" 画像を右側に寄せ、左側にテクストを回り込ませる <br clear="right">を回り込みテキストの最後に置いて回り込みを解除する
align="top" 画像の上部と周囲のテキストの上部を揃える
align="middle" 画像の中央と周囲のテキストのベースラインを揃える
align="bottom" 画像の下部と周囲のテキストのベースラインを揃える(デフォルト)

たとえば、次のようになる:

<img src="image/einstein.gif" alt="[Einstein]" align="left">
この用例は、インライン画像に文字を回り込ませるオプションを指定している。
画像は左寄せに表示されている。<br>
文は画像の右側に回り込んでいる。<br>
<br clear="left">
ここから次の文が始まる。
[Einstein] この用例は、インライン画像に文字を回り込ませるオプションを指定している。 画像は左寄せに表示されている。
文は画像の右側に回り込んでいる。

ここから次の文が始まる。

目次

画像ファイルを乱用しない

無意味な画像の張り込みや無駄に大きな画像の張り込みはすべきではない。 画像や音声ファイルは大きなサイズになりやすい。 大きいサイズのファイルを転送することは、いたずらにネットワークの渋滞を招く結果となる。

「試しに」アクセスしたページが、実はかなり大きなファイルサイズを含んでいたために転送に時間がかかり、見てみたらつまらないページでガッカリしたということをよく経験する。 大きいファイルのダウンロードに時間がかかりそうな時には、アクセスは打ち切られてしまう。

このようなことを防ぐために、ホームページを作成するときには、次の点に注意する。

  1. 最初にアクセスされ易いトップページ(~/public_html/index.html)には、大きな画像データを張り込んだりしない。 まず、ページを見てもらうことこそが大切である。
  2. 画像などファイルサイズが大きなファイルを含むページの場合、いきなりそのページにリンクせずに、それを積極的に見たい人だけがアクセスできるようなページ設計をする。 この時、リンクされているファイル・ページに関する情報(ファイル形式、内容やサイズ)を示しておく。
  3. ページに画像ファイルがどうしても必要な時には、オリジナルの縮小版を作成しておき、まずこれをインラインイメージとしてこれを張りつけ、そこから必要な情報を記載してオリジナル画像にリンクを張っておく。

たとえば、第3項の注意にしたがって次のようなページデザインが考えられる。

<a href="image/myphoto.jpg">
<img src="image/miniphoto.jpg" alt="My Photo" align="middle">私の写真</a>(JPEG 40KB)

この例では、ディレクトリimageにある画像ファイルmyphoto.gifにリンクを張っているが、アンカーポイントとしてそのミニチュアの画像ファイルminiphoto.gif自身も使っている。 リンク先のデータサイズとして40KBを提示しているので、利用ははこれ以上のアクセスをするかどうかを判断できる。


Webページの作成目次
オンラインテキスト目次

mizutani@rsch.tuis.ac.jp