＜IMG>は画像を表示するためのタグです。ＩＭＧはイメージ（imageすなわち画像）の略でしょう。
以降、わかりやすいようにあえて画像と呼んでいきます。
画像を表示するには例のように＜IMG＞タグにSRC属性でファイル名（パス）またはURLを指定します。SRCは推測ですがsource（源とか出所の意）の略ではないかと思います。間違っているかもしれませんのでご注意を！
例 <IMG SRC="./image/title.gif">
<IMG SRC="http://www.siesta-soft.co.jp/image/title.gif">
さて、例の１つ目のタグは背景画像の項で少しだけ説明したパスを使ったものです。
ここでパスの考え方を詳しく知りたい方は「パス(path)とは」をご一読ください。
この例ではこのHTMLと同じ階層にあるimageフォルダに入っているtitle.gifファイルを呼び出しています。画像の有無は関係なく、なければ表示されないというだけのことで他のプログラム言語のようにエラーにはなりません。
多分、初心者で勘のいい方ならば、それならわざわざ別の階層にせずに全部を同じ階層に入れておけば記述が楽じゃないかと思われたはずです。
ただ、別の機会に説明しますが、FTPやパーミッションなどのことを考えると画像ファイルやCGIファイルなどはHTMLファイルとわけておいた方が管理が楽です。
FTPとはファイル・トランスファ・プロトコルの略でファイルの通信規約のことです。通常、ホームページに関連するファイル群をアップロードするときにFTPソフトを使います。
一方、「パーミッション」とはその訳語どおり「許可」のことです。つまりある立場の人に対してファイルの読み・書き・実行をそれぞれさせたり禁止しておいたりする機能のことです。
いずれ別の機会に説明します。
例の２つ目のタグはURLを指定しています。URLも広義のパスです。ただ、URLは唯一無二のパスであり絶対指定のパスといえます。この場合、呼び出し元のHTMLファイルをどのサーバ、ドメインに移そうとsiesta-soft.co.jpサイトのimageディレクトリ（フォルダ）にあるtitle.gifを読み込みにいきます。
一方、１つ目のタグはサーバ、ドメインはどうであれ、自身のサーバ内の画像を呼び出そうとしますので呼び出し元のファイルを移動すれば画像もそれにあわせて移しておかないと読みこめなくなります。
通常、自身のサイト内の画像を参照する場合にはURLは記述せず、他のサーバにある画像を参照するときに用います。
この場合、ページや画像には著作権というものがありますので相手の許可を得てからリンクしてください。
もしテストをしたいならhttp://www.siesta-soft.co.jp/link/link.jpgをご利用ください。次のような画像です。下の画像は実際の１/4の大きさです。
さて＜IMG＞タグにはWIDTH（幅）とHEIGHT（高さ）という属性があります。これを指定することによって同じ画像でも拡大・縮小、縦長・横長にすることが可能です。水平線同様、比率での指定も可能です。
ただ画像はオリジナルサイズで使うのがもっとも自然で、きれいなはずですので私としては勧めません。
もし縦長や横長の画像として使いたいときでも画像処理ソフトを使ってあらかじめそのように加工しておくことをお勧めします。この方がよりきれいに表示できると思います。
これらの属性は一応、デフォルト（指定しないときの初期値）で画像そのものの実サイズが与えられます。それなら、先のことを合わせれば、使う必要はまったくないじゃないかということになりますが、実はあるのです。
実はHTMLがページを表示する場合に画像サイズ（WIDTH・HEIGHT）が指定されているとブラウザがレイアウトを速く終えテキストが先に表示されるという性質をもっているからです。
これを省くと（画像のファイルサイズが大きいときには特に）テキスト（文章）や他の小さな画像の表示が遅れます。
もっともページ作成ソフトをつかっている限り自動的に吐き出されますが．．．。
これを指定したからといってすべての情報が読みこまれる時間がかわるわけではありません。先にテキストが表示されることで画像全体が完全に表示される以前にテキスト情報を先に読めるだけのことです。それでも通常、読む側にとっては待ち時間がなく、画像を見る必要がなければページを移動することもできるので、待たせるという感覚は薄れます。
例 <IMG SRC="./image/title.gif" border="0" WIDTH＝”５０％” HEIGHT＝”５０”>
<IMG SRC="http://www.siesta-soft.co.jp/link/link.jpg"
border="1">
余談ですがあるインターネットの雑誌に８秒ルールというものが紹介されていました。
これはある研究機関か学者の誰かかが、インターネットを使う行動パターンを調査・研究した結果らしいのですが、ブラウズしているユーザーは画面がまったく動きがないときにどのくらいの時間で（他のページに行くなどの）中断行動をおこすかというものです。その結果が８秒らしいのです。
後述の１口メモに画像使用の勧め的なことを書いていますが、どれだけ画像を使うにしてもやはり８秒ルールを念頭にいれて工夫すべきだと思います。たとえば＜IMG＞タグの属性ＬＯＷＳＲＣやあるいは画像を※インターレースGIFやプログレッシブJPEGにするなどのことは考えるべきでしょう。
※LOWSRCはSRCで指定した高品位の画像を表示する前にファイルサイズの小さい低品位の画像をとりあえず表示させるものです。インターレースＧＩＦやプログレッシブＪＰＥＧが登場する前に有効な手段でした。
インターレースGIFやプログレッシブJPEGとは最初大まかに読み込んだ後、徐々に画像のディティールを読みこむ画像の形式をいいます。これによりダウンロードの状態も確認しながら表示できます。ほとんどの画像処理ソフトで保存の際に選択できると思います。
私としてはより画像サイズを小さくできるので後者をお勧めします。
画像のファイルタイプがいくつかでてきたので多少説明しておきましょう。
ファイルタイプはその圧縮・保存方法によって適する対象があります。
まずGIFですが２５６色しか使えません。したがって色数が多くなりがちな写真画像やグラデーションなどは苦手ですが、境界のはっきりしたイラストや文字などには最適です。あまり色を使っていない画像であれば画質をそれほど落とさず最もファイルサイズを小さくできる形式です。透過画像（背景が透明）も使えます。
一方JPEGですが、こちらは写真やグラデーションなど色数の多い画像を減色する際に最適の形式です。ただあまり画質を落としすぎると全体に靄っぽいものが現れます。段階的にプレビューできる画像処理ソフトがあれば使いやすい形式です。
これ以外に画質を落とすことなく圧縮する方式としてPNGがあります。この形式では２４ビットでの保存も可能ですので画質はBMPと比べてもまったく遜色がありません。ただしGIFやJPEGと比べるとファイルサイズは大きくなります。透過画像も使えます。
上のリンク用画像の見本を見ると画像の周囲に境界線が引かれています。これはもともと画像上にあった線ではなく＜IMG＞タグの属性BORDERを使ってあらわしたものです。
元の画像そのものに直接、境界線を引く方法もありますが、それよりは周囲の状況に応じてつけたり消したりできるBORDER属性を用いた方がより便利です。BORDER=0にすると境界線は消えます。
境界線の色は＜BODY＞タグのTEXT属性で変えられると説明されている本もありますが、自分のブラウザでは色が変えられなかったので、私は１マスだけの＜TABLE＞タグを作りその中に画像を入れて＜TABLE＞タグのBORDER属性で表現しています。
例 <IMG SRC="./image/title.gif" width="100"
height="50" border="0">
<IMG SRC="http://www.siesta-soft.co.jp/link/link.jpg"
width="213" height="286"
border="1">
構 文
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<IMG SRC="./image/title.gif"
width="213" height="286"
border="1">
</BODY>
</HTML>
使用例
<HTML>
<HEAD>
<TITLE>画像のリンク</TITLE>
</HEAD>
<BODY>
<IMG
SRC="http://www.siesta-soft.co.jp/link/link.jpg"
width="213" height="286"
border="1">
</BODY>
</HTML>
|
