<img src="" alt="" width="" height="">

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類
要素

img要素に width="" と height="" を追加すると、画像のサイズを指定することができます。


<img src="sample.gif" alt="サンプル" width="300" height="200">
属性 値 説明
width="" ピクセル数またはパーセント 画像の幅を指定
height="" ピクセル数またはパーセント 画像の高さを指定

この属性を指定することで、画像の表示サイズを変更することができます。

  • しかし、データ量そのものは変化しないので、巨大な画像を扱う際（サムネイルとして縮小する場合など）には注意が必要です。また、この属性で表示サイズを変更すると、画質が悪くなってしまう場合があります。（画像サイズの変更には、画像編集ソフトを使用した方がいいでしょう）

大きさを変更しない場合でもサイズ指定を行う

画像の大きさを変更しない場合でも、サイズの指定を行っておくことをお勧めします。

［写真］ （193×130）

例えば、幅193ピクセル×高さ130ピクセルの画像を読み込む場合は、そのサイズをそのまま次のように指定しておきます。

<img src="rainbow.jpg" alt="写真" width="193" height="130">

画像のサイズを指定しておくと、画像の読み込みを待たずに文書全体が表示されるようになります。そのため、感覚的には表示速度が高まります。また、レンダリング中のカクカクとした動き（画像が読み込まれるごとにレイアウトが動いてしまう現象）がなくなります。

使用例


<p><img src="rainbow.jpg" alt="写真" width="193" height="130"> そのままの大きさ</p>

<p><img src="rainbow.jpg" alt="写真" width="96" height="65"> 縮小</p>

<p><img src="rainbow.jpg" alt="写真" width="100%" height="130"> 幅だけを拡大</p>
表示例

写真 そのままの大きさ

写真 縮小

写真 幅だけを拡大