1. Home
  2. HTMLタグ
  3. イメージタグ
  4. 画像のサイズを指定する

画像のサイズを指定する


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


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>

表示例

写真 そのままの大きさ

写真 縮小

写真 幅だけを拡大


イメージタグ

ページの先頭へ