HTML <img> タグの height と width 属性
定義と使用方法
<img> タグの height および width 属性で画像のサイズを設定します。
ヒント：画像に height と width 属性を指定することは良い習慣です。これらの属性が設定されていると、ページが読み込まれた際に画像のスペースを確保できます。これらの属性が指定されていない場合、ブラウザは画像のサイズを理解できず、適切なスペースを確保できません。その結果、画像が読み込まれたときにページのレイアウトが変更されることがあります。（以下にその理由を詳細に説明します）。
ヒント：height と width 属性を通じて画像を拡大することは推奨されません。height と width 属性を通じて画像を縮小すると、ユーザーは大容量の画像をダウンロードする必要があります（実際にページ上に見えるサイズに関わらず）。正しい方法は、画像をウェブページ上に使用する前に、ソフトウェアを使用して適切なサイズに処理することです。
詳細な読み物：heightとwidth属性の詳細
他の例
画像のサイズを変更する - フィルラー画像の作成
height と width 属性には、実際のサイズを指定する必要がない隠れた特性があります。つまり、これらの値は実際のサイズよりも大きくしたり小さくしたりできます。ブラウザは自動的に画像を調整し、割り当てられたスペースに適応させます。この方法を使用すると、大画像のサムネイルを作成したり、非常に小さい画像を拡大したりすることが容易になります。ただし、注意すべき点是、ブラウザは必ずしも最終的に表示されるサイズに関わらず、整个のファイルをダウンロードする必要があることです。また、元の横幅と高さの比率を保護しないと、画像が歪むことがあります。
height と width 属性の別のトリックは、ページエリアを簡単に埋め込むことができ、ドキュメントのパフォーマンスを改善することです。例えば、ドキュメントに彩色の横条を配置したいと考えている場合、完全なサイズの画像を作成する必要はありません。代わりに、幅と高さが1ピクセルの画像を作成し、使用したい色を設定して、それを height と width 属性を使用して大きいサイズに拡張します。
<img src="/i/ct_1px.gif" width="200px" height="30px" />
これは上記の HTML の効果であり、この色彩条は1ピクセルの画像で作成されています：
パーセンテージ値の使用
width 属性の最後のトリックは、絶対値のピクセルではなくパーセンテージ値を使用することです。これにより、ブラウザは画像を表示ウィンドウの一定割合に拡大します。したがって、表示ウィンドウの幅と同じ幅、30ピクセルの高さの彩色の横条を作成するには、以下のように実現できます：
<img src="/i/ct_1px.gif" width="60%" height="30px" />
ドキュメントウィンドウのサイズが変更されると、この画像のサイズも同様に変更されます：
ヒント：パーセンテージ形式の width 値が提供され、height が省略された場合、拡大または縮小に関わらず、ブラウザは画像の横幅と高さの比率を保護します。これは、画像の高さと横幅の比率が変更されず、画像が歪みを起こさないことを意味します。
以下のHTMLをご覧ください：
<img src="/i/ct_1px.gif" width="20%" />
つまり、画像ct_1px.gifのwidth属性の百分比值のみを設定すると、矩形画像が得られます（これは、ct_1px.gifが1px幅と高さの矩形であるためです）：
ヒント：私たちのオンラインテストツールで自分で試してみてください！
ヒント：上記の例を提供するのは、heightとwidth属性の使用方法をよりよく理解するためです。ページを飾るために大面積の単色のブロックが必要な場合は、もっと良い方法があります。背景色を作成するためにCSSを使用する。
ブラウザのサポート
すべてのブラウザがheightとwidth属性をサポートしています。
構文
<img height="value" />
または：
<img width="value" />
属性値
| 値 | 説明 |
|---|---|
| pixels | ピクセル単位で表される高さや幅の値 |
| percent | 要素の百分率で表される高さや幅の値 |
TIY例
- 画像サイズの調整
- この例では、画像を異なるサイズに調整する方法を示します。
heightとwidth属性の詳細
heightとwidth属性を使う理由とは
ドキュメントが読み込まれるときに内容が不規則に動くのを見たことはありますか。これが起こる理由は、ブラウザが各読み込まれた画像を表示するために、ページのレイアウトを不断に調整するためです。ブラウザは画像の幅と高さをダウンロードし解析して、画像のサイズを決定し、表示ウィンドウ内に対応する矩形スペースを確保します。その後、ブラウザはページの表示レイアウトを調整し、画像を挿入します。これにより、画像は独立したファイルであり、ソースファイルとともに独立して読み込まれることが示されています。
しかし、これはドキュメントを表示する最も効果的な方法ではありません。なぜなら、ブラウザは相邻および後続のドキュメント内容を表示する前に、各画像ファイルをチェックし、スクリーンスペースを計算する必要があるため、ドキュメントの表示に大きな遅延が生じ、ユーザーの読書を妨げる可能性があります。
クリエイターにとって、より効果的な方法は、<img>タグのheightとwidth属性を使って画像のサイズを指定することです。これにより、ブラウザは画像をダウンロードする前にその位置を確保し、ドキュメントの表示を加速し、ドキュメント内容の移動を防ぐことができます。これらの属性は整数値で、ピクセル単位で画像のサイズを表します。これらの属性が<img>タグ内でどの順番で表示されるかは重要ではありません。
height と width 属性の問題
虽然 <img> タグの height と width 属性はパフォーマンスを改善し、いくつかの小技を試すことができますが、それらを使用する際にはいくつかの厄介な副作用があります。ユーザーが自動ダウンロード画像の機能をオフにしていても、ブラウザは指定されたサイズで画像の空間を表示する必要があります。そして、読者に残るのは通常、意味のないアイコンが入った空のフレームで、これは画像が配置されている場所を示しています。その結果、ページは非常に悪く見え、完成していないかのように見え、多くのコンテンツが役に立ちません。指定されたサイズを使用しない場合、ブラウザはテキストの中に画像アイコンを配置するだけで、少なくとも読めるテキストが少なくともあります。
この問題に対する解決策がまだありません。ただ、以下の一点を強調したいです。それは、以下の通りです alt 属性および描述性テキスト、このようにして読者は少なくとも何が欠けているかを知ることができます。それでも、これらのサイズ属性を使用することをお勧めします。なぜなら、私たちはネットワークパフォーマンスを改善できるすべての行動を推奨するからです。
