この記事の要点

<img> は HTML に画像を埋め込むための空要素（終了タグなし） src（画像 URL）と alt（代替テキスト）が必須属性 width / height を指定するとレイアウトシフト（CLS）を防げる loading="lazy" で遅延読み込み、decoding="async" で描画ブロックを回避 srcset / sizes でレスポンシブ画像を提供し、デバイスに応じた最適サイズを配信できる

img 要素とは

<img> は HTML 文書に画像を埋め込むためのインライン要素です。空要素（void element）のため終了タグはなく、<img src="..." alt="..."> のように 1 タグで完結します。

基本構文

<img src="画像URL" alt="代替テキスト" width="幅" height="高さ">

主な属性

属性	役割	必須
src	画像ファイルの URL	必須
alt	代替テキスト（画像が表示できない／読み上げ用）	実質必須
width / height	表示サイズ（ピクセル）	推奨
loading	lazy / eager。遅延読み込みの制御	任意
decoding	async / sync / auto。デコード方式	任意
srcset	解像度別の画像候補	任意
sizes	各候補に対応する表示サイズ	srcset 併用時
referrerpolicy	リクエスト時の Referer 制御	任意
crossorigin	CORS 設定	任意

alt 属性の書き方

代替テキストは画像が読み込めない場合や、スクリーンリーダーで読み上げられる場合に使われる極めて重要な属性です。書き方を間違えるとアクセシビリティが大きく損なわれます。

画像の種類	alt の書き方
情報を持つ画像	その情報を簡潔に文章化（例: alt="月別売上の棒グラフ。1月100万、2月150万、3月200万"）
装飾画像	空文字 alt=""（無視させる）
リンクに含む画像	リンク先の内容を書く（例: 会社ロゴ → alt="会社名 トップページへ"）
テキストを含む画像	そのテキストをそのまま書く

レイアウトシフトを防ぐ width / height

width / height を指定すると、ブラウザは画像読み込み前にも領域を確保できるためCLS（Cumulative Layout Shift）が改善します。CSS で別サイズを指定したい場合でも、HTML には元画像の比率と一致する値を必ず書いておきます。

<!-- 800x600 の画像なら、CSS で width:100% にする場合でも -->
<img src="/hero.jpg" alt="" width="800" height="600" style="width:100%;height:auto">

遅延読み込みと非同期デコード

ファーストビュー外の画像は loading="lazy" を付けて遅延読み込みにすると、初期表示が速くなります。さらに decoding="async" でデコード中の描画ブロックも避けられます。

<img src="/photo.webp"
     alt="桜の写真"
     width="1200" height="800"
     loading="lazy"
     decoding="async">

ファーストビューに表示するメイン画像（LCP 対象）は loading="eager" または属性なしで即時読み込みさせます。

レスポンシブ画像（srcset / sizes）

デバイスの画面幅やピクセル比に応じて、最適な解像度の画像を配信できます。

<img src="/hero-800.jpg"
     srcset="/hero-400.jpg 400w,
             /hero-800.jpg 800w,
             /hero-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="メインビジュアル">

srcset は候補一覧、sizes は表示サイズの宣言です。これによりスマホには軽い画像、PC には高解像度を自動で選ばせられます。

picture 要素との組み合わせ

アートディレクション（端末ごとに別画像を出したい）や WebP / AVIF など新フォーマットへのフォールバックには <picture> を使います。

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img    src="/hero.jpg" alt="" width="1200" height="800">
</picture>

FAQ

Q: alt を空にしていい場合は？
A: 装飾画像（横線・飾り背景）の時だけ。alt 属性自体を省略するとファイル名が読み上げられるので、装飾でも alt="" は書きます。

Q: 表示サイズに合わせて自動で縮小される？
A: CSS の width / max-width を指定すれば見た目は縮みますが、転送量は元のままです。データ量を削るには srcset や CDN リサイズが必要。

Q: SVG はどうやって埋め込む？
A: <img src="icon.svg"> でも可。CSS で色を変えたい場合は <svg> 要素をインラインで書く方法が柔軟です。

関連

• 画像 — 親カテゴリ
• HTML — HTML トップ
• a要素 — リンクの中に画像を入れる場合
• picture 要素 — アートディレクション
• srcset / sizes 属性 — レスポンシブ画像