HTML <img> width 属性
定義と使用方法
width 属性を使用して、ピクセル単位で画像の幅を指定します。
ヒント：画像に height と width 属性を使用するのは良い習慣です。これらの属性が設定されていると、ページが読み込まれた際に画像のスペースを確保できます。これらの属性が設定されていない場合、ブラウザは画像のサイズを把握できず、適切なスペースを確保できません。その結果、画像が読み込まれた際にページのレイアウトが変化します。（以下にその理由を詳しく説明します）。
ヒント：を使用するのは避けましょう。 height と width 属性を使用して画像を拡大縮小します。heightと一緒に width 画像のサイズを縮小する属性を使用する場合、ユーザーは大きな容量の画像をダウンロードする必要があります（たとえ画面上で小さく見える場合でも）。正しい方法は、画像を適切なサイズに処理するためにソフトウェアを使用することです。
関連リンク：heightとwidth属性の詳細
例
600ピクセル高、500ピクセル幅の画像：
<img src="img_girl.jpg" alt="ジャケットの女の子" width="500" height="600">
構文
<img width="ピクセル">
属性値
| 値 | 説明 |
|---|---|
| ピクセル | 画像の幅をピクセルで指定します（例：width="100"）。 |
他の例
画像のサイズを変更する - フィルリング画像を作成する
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属性の詳細
heightとwidth属性を使用する理由
文書が読み込まれるときに内容が不規則に動くことがありますか？その理由は、ブラウザが各読み込まれた画像を表示するために、ページのレイアウトを不断に調整するからです。ブラウザは画像の幅と高さをダウンロードし解析し、それに基づいて画像のサイズを決定し、表示ウィンドウに対応する矩形スペースを確保します。その後、ブラウザはページの表示レイアウトを調整し、画像を表示に挿入します。これにより、画像は独立したファイルであり、ソースファイルとともに独立して読み込まれることが示されています。
しかし、これは文書を表示する最も効果的な方法ではありません。なぜなら、ブラウザは隣接する文書や後続の文書の内容を表示する前に、各画像ファイルをチェックし、スクリーンスペースを計算する必要があるからです。これにより、文書の表示に非常に大きな遅延が発生し、ユーザーの読書を妨げる可能性があります。
クリエイターにとって、より効果的な方法は、画像タグのheightとwidth属性を使用して画像のサイズを指定することです。その場合、ブラウザは画像をダウンロードする前にその位置を確保し、文書の表示を加速し、文書の内容の移動を防ぐことができます。これらの属性は整数値で、ピクセル単位で画像のサイズを示します。これらの属性は画像タグの中での出現順序は重要ではありません。
heightとwidth属性の問題
画像タグのheightとwidth属性はパフォーマンスを向上させ、いくつかの小技を試すことができますが、それらを使用する際にはいくつかの厄介なネガティブ効果があります。ユーザーが自動ダウンロード機能をオフにしていても、ブラウザは指定されたサイズで画像のためのスペースを表示する必要があります。その結果、読者に残るのは通常空のフレームで、その中には意味のないアイコンが配置されており、これは画像が配置される場所を示しています。そのときのページは非常に悪く見え、作業が完了していないように見え、多くのコンテンツが役に立ちません。指定されたサイズを使用しない場合、ブラウザはテキストの中に画像アイコンを配置するだけで、少なくとも読めるテキストが少しでも残ります。
この問題に対する解決策がまだありません。ただ一点だけ強調しますが、このように使用することをお勧めします。 alt 属性 および説明的なテキストこれにより、読者がここに何が欠けているか少なくとも知ることができます。それでも、これらのサイズ属性を使用することをお勧めします。なぜなら、私たちはネットワークパフォーマンスを改善できるすべての行動を推奨するからです。
ブラウザのサポート
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| サポート | サポート | サポート | サポート | サポート |
