MB-Support

パソコン初心者のサポートページ

画像サイズを指定する方法 width="サイズ" height="サイズ"

 画像サイズを指定しなくても、ブラウザが解釈して正しく表示する事は可能です。しかし、サイズを指定する方が、ページレイアウトを確定するのが早いため、ページ全体の読み込みに違いがでる場合もあります。


width で横幅を指定して、height で縦幅(高さ)を指定します。 画像を表示する方法 でも掲載しましたが、 ここでは画像の拡大と縮小を実行してみます。



元のサイズを指定

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<img src="画像のアドレス" width="244" height="77" />
</body>
</html>

ブラウザ


width="100" heidht="50"の場合(縮小)


  width="100" と height="50" の間に半角スペースを入れます。 縮小表示されますが、参照している画像は上と同じ width="244" height="77" なので、データ容量は一緒です。つまり縮小表示しても、軽くなった事にはなりません。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<img src="画像のアドレス"width="100" height="50" />
</body>
</html>

ブラウザ


width="500" heidht="200"の場合(拡大)


  width="100" と height="50" の間に半角スペースを入れます。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<img src="画像のアドレス"width="400" height="200" />
</body>
</html>

ブラウザ

拡大すると汚いです。ワープロソフトで小さい画像を拡大して印刷する時、目が荒くなるのと一緒です。



追記:

ホームページが表示されるまでの流れは、ブラウザのアドレスに WEB サーバーアドレスを入力して、WEB サーバーからホームページを形成する複数のファイルをダウンロードして、そのファイルを元にブラウザがローカルで構築して画面に 描画しています。

ダウンロードした HTML ファイルをブラウザが処理する時、ソースの上から下へと解析します。 この解析方法はブラウザに搭載されたレタリングエンジンにより異なりますが、例えば画像が埋め込まれた事を示す <img src=""> を読み込むと、ページのレイアウトによってはその画像のダウンロードが完了するのを待たされる場合があります。これはテーブル内に画像を表示する時などです。

画像のダウンロードの完了を待たずしてブラウザに表示される場合は、一時的に alt で指定したテキストが表示されるか、デフォルトの画像が存在する事を示すアイコンが表示されるでしょう。 そして、画像のダウンロードが完了した時に、画像ファイルのサイズを解析して、タグが挿入された部分に再描画します。

画像を含めてデザインされたページなどでは、何らかしらの問題で画像が表示できなかった場合や、画像をダウンロードするまでの間、ページデザインが崩れてしまう場合もあるでしょう。 画像サイズを指定する事で、画像自体は表示できない、もしくは読み込まれている状態でも、その空間を確定する事ができるので、結果的に処理速度や描画速度を向上させる事ができます。

画像のサイズを確認する方法




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項