| 画像の表示サイズを指定するのに width と height の属性をつかいます。
widthは横幅 heightは高さを示します。
これが指定されていない場合は 画像は本来のサイズで表示されます。
この指定はかならずやっておかないといけないというものではありませんが、
指定しておくと 画像自体の大きさをより早く確定できますので、読み込みから
表示されるまでの時間を短縮させることができます。 ですからなるべく指定して
おいたほうがいいでしょう。
下のイルカのイラスト（iruka01.gif）は 横幅82ピクセルで 高さは89ピクセルです。
この場合のHTMLタグは
| <img src="iruka01.gif width="82"
height="89"> |
● 見た目の大きさを変えてみる
このタグは 画像の見た目のサイズを変更することもできます。
例えば 上記のイルカの大きさをちょっと変えてみると
見た目の大きさは確かにかわりましたが 画像がギザギザで汚くなってしまいましたね。
ですから 本来のサイズを変えての表示指定はおすすめできません。 画像の大きさを
変えたいのであれば 画像編集ソフトで本来の画像自体の大きさを変更するようにしま
しょう。
● gifアニメーションのサイズを変更したら？
今度はgifアニメーションではどうなるのか ちょっと見てみましょう。
まずは通常の大きさです。 （素材提供 よい子のアニメーション）
大きくしてみると。。
今度は 小さくしてみます。
画像自体の大きさは変えられますが くさんのボディラインがギザギザに
なってしまいました。 ですからこれもやめておいたほうがいいですね。
● ファイルサイズは変わらない
今度は下の写真をみてください。
クリックすると本来の大きさが表示されます。
この写真の本来の大きさは 640×480の大きさで ファイルサイズは 58Kです。
width と height の指定で 134×99にしてみました。
でも ファイルサイズは 58Ｋのままです。
つまり見た目の大きさは変わっても
ファイルサイズは変わらない というのがわかりますね。
ちなみに これを 画像編集ソフトで 134×99にしてみると
見た目は同じですが ファイルサイズは 4k になりました。
ファイルサイズが 1/10以下ですので 読み込みされる早さも格段に早くなります。
つまり 写真を小さく表示したいなら 画像編集ソフトで画像自体を小さく編集して
から HTMLで貼り付けた方がよいというのがわかりますね。
● 結論
では 上記のことをまとめてみましょう。
○ width と height を指定すると、画像自体の大きさをより早く確定できるので
読み込みも早くなる。
○ width と height を指定して 画像の大きさを変更してしまうと 画像の色が
汚くなってしまうのでやめたほうがいい。
○ width と height を指定すると 画像の見た目は変えられるが、
ファイルサイズ自体はかわらない。
つまり width と height の指定は 画像そのものの大きさを指定するもので
あって 見た目の大きさを変えたりするものではない という事です。
|
