HTML REFERENCE

メディア・画像

<img> 要素

ー 画像をページに埋め込む空要素。alt・width・height・loading 属性の適切な指定が重要

POINT !

<img> 要素のポイント！

  • alt 属性は <img> において最重要の属性。スクリーンリーダーへの読み上げテキストであり、画像が読み込めない場合の代替テキストとしても機能する。装飾目的の画像には alt="" と空にして、スクリーンリーダーにスキップさせる。
  • width と height 属性は必ず指定する。ブラウザはこれらの値からアスペクト比を計算し、画像読み込み前にスペースを確保する。指定がないと画像読み込み後にレイアウトがずれる CLS（Cumulative Layout Shift）が発生し、Core Web Vitals のスコアを下げる。
  • loading="lazy" 属性を使うと、ビューポート外の画像の読み込みを遅延できる。ページ読み込みパフォーマンスの改善に有効だが、ファーストビュー（スクロールなしで見える範囲）の画像には適用しない。LCP（Largest Contentful Paint）対象の画像には逆に fetchpriority="high" を付与する。
  • 現代的な Web では <picture> 要素と組み合わせて、WebP / AVIF などの次世代フォーマットを提供しつつ、非対応ブラウザへの JPEG/PNG フォールバックを両立させることが推奨される。

概要

<img> 要素は HTML ページに画像を埋め込むための空要素（閉じタグなし）です。
src 属性に画像 URL を、alt 属性に代替テキストを指定するのが最低限のセットです。

シンプルに見えますが、<img> には押さえるべき重要なポイントが多くあります。

① アクセシビリティ（alt 属性）
画像を表示できない環境（スクリーンリーダー、通信障害、テキストブラウザ）でも情報が伝わるよう、alt には画像の内容・目的を適切に記述します。
装飾目的の画像（区切り線の画像など）は alt="" と空にします。

② パフォーマンス（width / height / loading）
width と height を指定することで、ブラウザが画像読み込み前にレイアウト領域を確保でき、ページのガタつき（CLS）を防げます。
スクロール外の画像には loading="lazy" を使い、ファーストビューへの集中読み込みを実現します。

③ 画像フォーマット
JPEG・PNG に加え、WebP・AVIF などの次世代フォーマットは同等画質でファイルサイズが大幅に小さくなります。
<picture> 要素と組み合わせて提供するのが現代のベストプラクティスです。

具体的な役割

ブログのアイキャッチ・商品画像・アイコン・図解など、ページのコンテンツとして意味を持つ画像すべてに使う。CSS の background-image は「装飾」目的の画像に使い、コンテンツ画像は <img> でマークアップするのが原則。

アクセシビリティ

♿ alt 属性の書き方がアクセシビリティの中核です。状況別の指針を以下に示します。

・コンテンツ画像：画像の内容を具体的に説明
例：alt="笑顔で握手をするビジネスマンとビジネスウーマン"

・テキストを含む画像（バナーなど）：そのテキストをそのまま記述
例：alt="夏のセール 最大50%OFF 8月31日まで"

・装飾画像（区切り線・背景画像など）：alt="" と空にする
alt 属性自体を省略すると、スクリーンリーダーがファイル名を読み上げるため必ず空文字で指定する

・リンク内の画像：リンク先の説明を alt に記述
例：<a href="/"><img src="logo.png" alt="WebDictionary トップページへ"></a>

ネスト（入れ子）のルール

📦 <img> は空要素のため子要素を持ちません。

主要な属性一覧：
・src（必須）：画像の URL
・alt（必須）：代替テキスト（空文字 OK）
・width / height：ピクセル単位の幅・高さ（CLS 防止のため必須推奨）
・loading：lazy（遅延読み込み）/ eager（即時読み込み、デフォルト）
・fetchpriority：high / low / auto（読み込み優先度）
・decoding：async / sync / auto（デコード方式）
・srcset / sizes：レスポンシブ画像のための複数ソース指定

技術の変遷：昔の常識 vs 今の常識

TRADITION (昔)
かつては <img src="image.jpg"> に alt を指定しないことが珍しくなく、アクセシビリティが軽視されていた。画像サイズは固定ピクセル指定が主流で、レスポンシブ対応は CSS の max-width: 100% を後付けするだけだった。フォーマットは JPEG・PNG・GIF の三択だった。
MODERN (今)
alt は必須の意識が定着し、Lighthouse などのツールで自動チェックされる。width / height の指定は CLS スコア改善のためのベストプラクティスとして再注目された。loading="lazy" は標準化され、<picture> + WebP / AVIF の提供が推奨される。LCP 画像には fetchpriority="high" を付与するなど、Core Web Vitals を意識した細かいチューニングが求められる。

主要な属性

属性名 説明
HTMLカテゴリ フローコンテンツ、フレージングコンテンツ、エンベデッドコンテンツ、フォーム関連（usemap属性時）、パルパブルコンテンツ
配置可能な要素 空要素のため子要素なし
親要素の制限 フレージングコンテンツを受け入れる任意の要素
ARIAロール img（alt あり）/ presentation（alt="" の場合）

利用例

基本的な <img> の書き方（alt・width・height 付き）

CLS を防ぐための width/height 指定と、適切な alt テキストを設定した最低限の実装例。

CSS Style
body { font-family: sans-serif; padding: 24px; background: #f8fafc; } .img-card { background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; margin-bottom: 16px; } .img-placeholder { background: linear-gradient(135deg, #e2e8f0, #cbd5e1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 13px; font-weight: 600; margin-bottom: 10px; } .img-label { font-size: 12px; color: #94a3b8; } code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 12px; }
HTML Structure
<!-- コンテンツ画像（意味のある alt を記述） -->
<img
  src="/images/team-photo.jpg"
  alt="オフィスで打ち合わせをする開発チームの5人"
  width="800"
  height="450"
  loading="lazy"
  decoding="async"
>

<!-- ファーストビューのヒーロー画像（遅延読み込みしない） -->
<img
  src="/images/hero.jpg"
  alt="WebDictionary - Web制作リファレンス辞典"
  width="1200"
  height="630"
  fetchpriority="high"
>

<!-- 装飾目的の画像（alt は空文字） -->
<img src="/images/divider.png" alt="" width="600" height="2">

<picture> と組み合わせた次世代フォーマット対応

WebP 対応ブラウザには WebP を、非対応ブラウザには JPEG を提供するフォールバック実装。

CSS Style
body { font-family: sans-serif; padding: 24px; background: #f8fafc; } .browser-table { width: 100%; border-collapse: collapse; font-size: 13px; border-radius: 8px; overflow: hidden; } .browser-table th { background: #1a56db; color: white; padding: 10px 14px; text-align: left; } .browser-table td { padding: 10px 14px; border-bottom: 1px solid #e2e8f0; background: white; } .badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; } .good { background: #dcfce7; color: #166534; } .mid { background: #fef9c3; color: #854d0e; }
HTML Structure
<picture>
  <!-- AVIF（最も高圧縮・対応ブラウザに提供） -->
  <source
    type="image/avif"
    srcset="/images/photo.avif"
  >
  <!-- WebP（広く対応・AVIFより軽い） -->
  <source
    type="image/webp"
    srcset="/images/photo.webp"
  >
  <!-- フォールバック（非対応ブラウザ用） -->
  <img
    src="/images/photo.jpg"
    alt="春の公園で遊ぶ子どもたち"
    width="800"
    height="600"
    loading="lazy"
  >
</picture>

よくある誤用・注意点

alt を省略・または意味のない値にすること、width/height を指定しないことが最もよくある誤り。ファイル名をそのままaltにするのも NG。

CSS
HTML (Incorrect)
<!-- ❌ 悪い例 -->
<img src="photo.jpg"><!-- alt なし → スクリーンリーダーがファイル名を読む -->
<img src="photo.jpg" alt="画像"><!-- 意味がない alt -->
<img src="photo.jpg" alt="photo.jpg"><!-- ファイル名をそのまま使っている -->
<img src="photo.jpg" alt="ここに画像があります"><!-- 説明になっていない -->

<!-- width/height なし → CLS が発生する -->
<img src="large-photo.jpg" alt="チームの写真">

<!-- ✅ 良い例 -->
<img
  src="team.jpg"
  alt="会議室で議論する開発チームの3人"
  width="800"
  height="450"
  loading="lazy"
>

Try it Live: <img>

×

リアルタイムで結果が反映されます。