Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<img>

『img』要素はHTMLページに画像を埋め込むための要素です。終了タグを持たない空要素で、『src』属性で画像のURLを、『alt』属性で代替テキストを指定します。

構文

<!-- 基本的な画像の埋め込み -->
<img src="photo.jpg" alt="山の風景写真">

<!-- サイズ指定（レイアウトシフト防止のため推奨） -->
<img src="logo.png" alt="サイトロゴ" width="200" height="80">

<!-- 遅延読み込み（画面外の画像に設定） -->
<img src="banner.jpg" alt="バナー" loading="lazy">

属性一覧

属性	概要
src	表示する画像ファイルのURL（パス）を指定します。必須属性です。
alt	画像の代替テキストを指定します。画像が表示できない場合やスクリーンリーダーが読み上げる際に使用されます。
width	画像の表示幅をピクセルで指定します。
height	画像の表示高さをピクセルで指定します。
loading	画像の読み込みタイミングを制御します。『lazy』（遅延読み込み）と『eager』（即時読み込み）があります。
decoding	画像のデコード方法を指定します。『async』にすると他のコンテンツをブロックせずに非同期でデコードします。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>img要素</title>
  <style>
    img { max-width: 100%; height: auto; }
  </style>
</head>
<body>

  <!-- 基本的な画像（幅・高さを明示してレイアウトシフト防止） -->
  <p>
    <img src="https://placehold.jp/400x200.png"
      alt="400×200のサンプル画像"
      width="400" height="200">
  </p>

  <!-- 装飾目的の画像はaltを空にする -->
  <p>
    <img src="decoration.png" alt="" width="32" height="32">
    新着情報
  </p>

  <!-- ページ下部の画像は遅延読み込みを設定 -->
  <p>
    <img src="footer-banner.jpg"
      alt="お問い合わせバナー"
      width="800" height="100"
      loading="lazy"
      decoding="async">
  </p>

</body>
</html>

実行結果

400×200のプレースホルダー画像が表示されます。装飾用アイコン画像と「新着情報」のテキストが横並びになり、ページ下部のバナーは画面内に入ったときに遅延読み込みされます。

<!-- ブラウザ上での表示イメージ -->
┌──────────────────────┐
│                      │
│  400×200 の画像      │
│                      │
└──────────────────────┘

🔴 新着情報   ← 小さいアイコン画像と横並び

[ フッターバナー画像（スクロール時に読み込み） ]

概要

『alt』属性はアクセシビリティと SEO の両方で重要です。スクリーンリーダーを使用しているユーザーへの配慮として、画像が伝える内容を簡潔に記述してください。一方、装飾目的で内容のない画像（区切り線・背景パターンなど）は『alt=""』と空文字にしてください。省略するとスクリーンリーダーがファイル名を読み上げてしまいます。

『width』と『height』属性でサイズを明示することを強く推奨します。ブラウザがページを描画する際に画像のサイズをあらかじめ確保できるため、画像読み込み後にレイアウトが崩れる「レイアウトシフト（CLS）」を防ぎ、Core Web Vitals のスコア改善にもつながります。

ファーストビューに表示される重要な画像には『loading="eager"』（デフォルト）、スクロールしないと見えない画像には『loading="lazy"』を設定するとページの初期表示速度が向上します。CSSでのレスポンシブ対応には、『max-width: 100%; height: auto;』を設定するのが定番の方法です。