HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<img>
画像（Image）要素。ドキュメントに画像を埋め込むための要素です。
info
概要
<img> 要素（画像要素）は、HTMLドキュメントに画像ファイルを埋め込みます。この要素は単独のタグ（空要素）であり、終了タグは不要です。
画像を正しく表示し、アクセシビリティを確保するために、**src 属性**（画像ファイルのパス）と**alt 属性**（代替テキスト）は必須です。
play_circle
デモ (静的表示)
HTML (Source)
<img src="path/to/sample.png"
alt="サンプル画像：青い空と白い雲"
width="200" height="100">
<br><br>
<!-- 画像が読み込めなかった場合 -->
<img src="path/to/broken.jpg"
alt="代替テキストが表示されます"
width="150" height="150">
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| src | 表示する画像ファイルのパス（URL）。**必須属性**です。 |
| alt | 画像が表示できない場合に代わりに表示されるテキスト。視覚障害者用のスクリーンリーダーで読み上げられるため、**必須属性**です。 |
| width | 画像の表示幅（単位なし、ピクセル）。パフォーマンス向上のため、画像の本来の比率に合わせて指定が推奨されます。 |
| height | 画像の表示高さ（単位なし、ピクセル）。パフォーマンス向上のため、画像の本来の比率に合わせて指定が推奨されます。 |
| loading | 画像の読み込み戦略を指定します。eager: すぐに読み込む（デフォルト）lazy: ビューポートに近付いたときに遅延読み込みする
|
| decoding | 画像のデコード方法を指定し、パフォーマンスに影響を与えます。async: 他のコンテンツと非同期でデコード（推奨）sync: 他のコンテンツと同期してデコード
|
| srcset | 異なる解像度やビューポートサイズに応じて、ブラウザに適切な画像を選択させるための画像ソースセットを指定します。 |
| sizes | srcset属性と組み合わせて使用し、表示される画像のサイズをブラウザに伝えます。 |
code
実用例
1. 遅延読み込み (Lazy Loading)
<img src="low_priority_image.jpg"
alt="ページの最下部にある画像"
width="800" height="600"
loading="lazy">
ページの初期表示では読み込まれず、ユーザーがスクロールして画像が画面に近づいたときに読み込まれます。
2. レスポンシブ画像 (srcset)
<img src="medium.jpg"
srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, 800px"
alt="異なるサイズで最適化された風景写真">
ブラウザが画面サイズや解像度に応じて最も適切な画像（`small.jpg`, `medium.jpg`, `large.jpg`）を自動で選択し、データ転送量を最適化します。
3. 装飾的な画像（altを空にする）
<img src="decorative_icon.png" alt="">
視覚的な装飾であり、コンテンツの内容を理解する上で重要ではない画像は、**`alt=""`** と指定することでスクリーンリーダーによる読み上げをスキップさせます。
lightbulb
知っておくべき重要事項
accessibility_new
アクセシビリティ (alt属性)
alt 属性は、画像の内容を簡潔かつ正確に説明するテキストを設定してください。画像がロードされない場合や、視覚障害を持つユーザーがスクリーンリーダーを使用する際に、コンテンツを理解するために不可欠です。装飾目的の場合は alt="" とします。
speed
パフォーマンスとレイアウトのずれ (CLS対策)
width 属性と height 属性を必ず指定するか、CSSでアスペクト比を確保してください。これにより、画像が読み込まれる前にレイアウトのためのスペースが確保され、**Cumulative Layout Shift (CLS)** を防ぎ、Webパフォーマンスが向上します。