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>
表示例
そのままの大きさ
縮小
幅だけを拡大
- サイト内検索
