タイトル: img要素
SEOタイトル: HTML img 要素完全ガイド（src / alt / width / height / loading / 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> 要素をインラインで書く方法が柔軟です。