●<IMG SRC="n"
WIDTH="n" HEIGHT="n">
画像は何も指定しないと、制作された大きさ原寸で表示されます。これをタグで好きな大きさに変えて表示することも出来ます。WIDTHとHEIGHTで指定します。どちらが横幅でどちらが高さなのかは解りますね?パラメータにはピクセル数を指定します。縦横の比率を変えて指定すれば、オリジナルの画像を縦長にしたり横長にしたりも出来ます。
WIDTHとHEIGHTのどちらか片方だけ指定した場合は、その拡大縮小比率に合わせて、もう片方も変形します。幅400、高さ200ピクセルの画像を、WIDTHのみ200と指定すればHEIGHTも自動的に100となります。
ただし、このタグを使って画像のサイズを変えたり、変形したりすると画像自体の表示が乱れて汚いものになります。特殊効果を狙う場合以外は、画像を原寸で作り、そのサイズで表示するように心がけましょう。
また、時々(多分HTML制作ソフトを使っていて、知らずにやっているのでしょう)、タグで無意味に画像を小さくしているサイトを見かけます。画面上小さくても、元の写真DATAが大きければ、ページを表示するための重さは変わりません。軽いページを作るため写真のサイズを小さくするのなら、元画像のサイズを変えましょう。
では、このサイズ指定は特殊な場合以外は「使えないタグなのか?」と言うとそうでもありません。原寸で表示するにしろ原寸の寸法をピクセル数で指定しておくと、画像を全て読み込み終わる前に、ブラウザはページ全体を把握できるため、結果的に表示が早くなるというメリットがあります。またブラウザで「画像を表示しない」ように設定している人や、万が一画像のリンクが切れている場合にも、レイアウトを崩さないで表示することが可能です。この「logo.jpg」は幅321ピクセル、縦42ピクセルで作ってありますので、原寸で表示するには
<IMG SRC="img/logo.jpg" WIDTH="321" HEIGHT="42">
となります。これをわざとリンクを切らして表示してみます。サイズ指定してあると
となり、サイズ指定しないと
このようになります。リンクが切れている場合など「ここに本来は画像がある」というアイコンが(ブラウザによってアイコンが違います)表示されますが、サイズ指定のない場合、普通のサイズのアイコンで表示されてしまうため、レイアウトが崩れるのです。たまたま、この「logo.jpg」は高さがアイコンとあまり変わらないサイズなので、それほど崩れていないかもしれませんが、もし、縦に長い画像を使っていたら(もしくは小さいサイズを使っていたら)こちらの意図したレイアウトでは表示されません。面倒くさくても、原寸のピクセル数を指定しておきましょう。