<img>

対応:		HTML 4（1997）

『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』にすると他のコンテンツをブロックせずに非同期でデコードします。

サンプルコード

sample_img.html

<!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="/reps/html-beginner/img/sample.jpg"
      alt="猫の写真"
      width="400" height="221">
  </p>

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

  <!-- ページ下部の画像は遅延読み込みを設定 -->
  <p>
    <img src="/reps/html-beginner/img/test.jpg"
      alt="お知らせバナー"
      width="640" height="354"
      loading="lazy"
      decoding="async">
  </p>

</body>
</html>

実行結果

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

サンプルページはこちら

srcset / sizes でレスポンシブ画像に対応する

『srcset』属性を使うと、画面の解像度や表示幅に応じて最適な画像ファイルをブラウザが自動選択します。Retinaディスプレイでは高解像度版、通常の画面では標準版を使い分けてファイルサイズを節約できます。

<!-- 解像度別（1x / 2x）の指定 -->
<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x"
  alt="ロゴ"
  width="200" height="80">

<!-- 幅ベースでの指定（sizes と合わせて使う） -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="風景写真"
  width="800" height="450"
  loading="lazy">
<!-- sizes の意味: 画面幅600px以下なら画像幅=ビューポート全幅、それ以外は800px -->

CSSでのスタイリング（object-fit）

コンテナに合わせて画像を表示する際、アスペクト比を保ったままトリミングしたい場合は『object-fit』プロパティが有効です。カードコンポーネントやサムネイルの実装でよく使われます。

<style>
  /* カードのサムネイル: 固定サイズでアスペクト比を保ちながらトリミング */
  .card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;      /* はみ出た部分をトリミング */
    object-position: center; /* トリミングの基準位置 */
  }

  /* レスポンシブ画像の定番設定 */
  img {
    max-width: 100%;
    height: auto;
  }

  /* 円形アバター */
  .avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
  }
</style>

<div class="card">
  <img class="card-img" src="article-thumb.jpg" alt="記事サムネイル">
</div>

<img class="avatar" src="user.jpg" alt="ユーザーアイコン" width="64" height="64">

object-fit の値	概要
fill	デフォルト。コンテナに合わせて引き伸ばします（アスペクト比が変わる場合あり）。
contain	アスペクト比を保ったままコンテナ内に収めます。余白が生じる場合があります。
cover	アスペクト比を保ったままコンテナを覆うようにトリミングします。はみ出た部分は非表示になります。
none	画像を本来のサイズで表示します。コンテナからはみ出る場合があります。
scale-down	『none』または『contain』のうち、小さくなる方を選択します。

概要

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

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

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