![]()
: IMG 要素
最終更新：2026-09-12
<img>IMG 要素
<img> 要素はページに画像を埋め込みます。空要素（終了タグなし）です。src と alt 属性は必須で、src が画像 URL、alt が代替テキスト（アクセシビリティと SEO に重要）を指定します。
| カテゴリ | リンクとメディア |
|---|---|
| コンテンツモデル | なし（空要素） |
| 許可される親要素 | フレージングコンテンツを受け入れる要素 |
| 閉じタグ | 自己完結 — 閉じタグ不要 |
| ステータス | 標準 |
📝 構文
<img src="画像URL" alt="代替テキスト" width="幅" height="高さ">⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
src | URL | The URL of the image file, either relative or absolute. |
alt | Text | Alternative text shown when the image can't load; also read by screen readers. |
width | Pixels | The display width of the image in pixels. |
height | Pixels | The display height of the image in pixels. |
loading | Keyword | The loading strategy for the image.
|
srcset | URL list | A list of candidate images for different screen sizes (responsive images). |
sizes | Media condition list | Describes the display width of the image at different viewports. |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <img> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
警告： alt 属性を省略しないでください。スクリーンリーダーと SEO にとって重要です。装飾のみの画像には alt="" を使います。
❓ よくある質問
Q![]()
の alt 属性は必須ですか？
Aはい、
alt 属性はアクセシビリティのために必須です。純粋に装飾的な画像には alt=""（空）を、情報的な画像には説明的なテキストを使用してください。スクリーンリーダーは alt に依存して視覚障碍者に画像を説明します。Q![]()
と の違いは何ですか？
A
<img> は単一の画像を読み込みます。<picture> は複数の <source> 要素を含み、ビューポート、解像度、またはフォーマットサポート（WebP vs JPEG など）に基づいて異なる画像を提供します。Q![]()
に width と height 属性を使うべきですか？
Aはい、常に
width と height 属性を含めてください（画像の固有寸法に合わせる）。これにより累積レイアウトシフト（CLS）を防ぎ、Core Web Vitals スコアが改善されます。🏷️ 関連タグ
💡 関連ケース
📚 関連チュートリアル
