この記事の要点

基本: <img src="..." alt="...">。alt 属性必須 Responsive Images: srcset / sizes でデバイスごとに最適サイズ配信 <picture> + <source>: WebP / AVIF などフォーマット切替 パフォーマンス: loading="lazy" / decoding="async" / fetchpriority 装飾用は CSS background-image、コンテンツは <img> と使い分け

基本: img 要素

<!-- 最小限 -->
<img src="logo.png" alt="会社ロゴ">

<!-- サイズ指定（CLS 防止のため推奨） -->
<img src="hero.jpg" alt="商品" width="800" height="600">

<!-- レスポンシブ + アクセシビリティ -->
<img
  src="photo.jpg"
  alt="鎌倉の海辺に建つ古民家カフェ"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
  style="max-width:100%; height:auto">

主要属性

属性	意味	推奨
src	画像 URL	必須
alt	代替テキスト	必須。装飾なら alt=""
width / height	表示サイズ	CLS 防止に推奨
loading	lazy / eager	初期画面外は lazy
decoding	async / sync / auto	通常 async
fetchpriority	high / low / auto	LCP 画像は high
srcset	複数解像度の候補	Retina 対応
sizes	表示サイズの宣言	srcset と併用
crossorigin	CORS	Canvas 描画時
referrerpolicy	Referer 制御	必要時

alt 属性のベストプラクティス

<!-- ✅ 内容を伝える -->
<img src="cat.jpg" alt="窓辺で日向ぼっこする三毛猫">

<!-- ✅ 装飾的画像（隣のテキストで十分） -->
<img src="check-icon.svg" alt="">

<!-- ✅ リンク内の画像はリンク先を説明 -->
<a href="/about"><img src="logo.png" alt="会社情報"></a>

<!-- ❌ 文字を画像にしただけ -->
<img src="title.png" alt="商品一覧">
<!-- → 可能なら HTML テキスト + CSS で実現 -->

<!-- ❌ 重複した情報 -->
<figure>
  <img src="cat.jpg" alt="可愛い猫">
  <figcaption>可愛い猫</figcaption>
</figure>
<!-- → alt="" にして figcaption に任せる -->

srcset / sizes: レスポンシブ画像

デバイスの画面密度と表示幅に応じて最適な画像を配信:

<!-- パターン1: Retina 対応（同じ表示サイズ、解像度違い） -->
<img
  src="photo-1x.jpg"
  srcset="photo-1x.jpg 1x,
          photo-2x.jpg 2x,
          photo-3x.jpg 3x"
  alt="商品">

<!-- パターン2: レイアウト幅に応じて切替 -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="商品">

<!--
  sizes の読み方:
   - スマホ (max-width: 600px): 画面幅全体に表示 → 400w を選択
   - タブレット (max-width: 1200px): 画面幅の半分 → 800w を選択
   - PC: 800px 固定 → 800w を選択 (Retina なら 1600w)
-->

picture 要素: フォーマット切替

WebP / AVIF のような新世代フォーマットを、対応ブラウザにだけ配信:

<picture>
  <!-- 最新の高効率フォーマット -->
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">

  <!-- フォールバック -->
  <img src="photo.jpg" alt="商品" width="800" height="600">
</picture>

<!-- アートディレクション: デバイスごとに違う画像 -->
<picture>
  <source media="(max-width: 600px)" srcset="hero-mobile.jpg">
  <source media="(max-width: 1200px)" srcset="hero-tablet.jpg">
  <img src="hero-desktop.jpg" alt="トップビジュアル">
</picture>

<!-- 両方併用 -->
<picture>
  <source
    type="image/avif"
    srcset="photo-400.avif 400w, photo-800.avif 800w, photo-1600.avif 1600w"
    sizes="(max-width: 600px) 100vw, 800px">
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
    sizes="(max-width: 600px) 100vw, 800px">
  <img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
    sizes="(max-width: 600px) 100vw, 800px"
    alt="商品"
    width="800" height="600">
</picture>

画像フォーマットの比較

形式	用途	圧縮	透過	アニメ	対応
JPEG	写真	非可逆	×	×	全ブラウザ
PNG	図・透過	可逆	○	×	全ブラウザ
GIF	古い画像・アニメ	可逆 (8bit)	○	○	全ブラウザ
WebP	万能（JPEG/PNG 代替）	非可逆/可逆	○	○	○ (IE 除く)
AVIF	最高効率	非可逆/可逆	○	○	○ (Chrome/Firefox/Safari)
SVG	アイコン・図	ベクター	○	○	全ブラウザ

2026 年現在の推奨: AVIF → WebP → JPEG/PNG のフォールバック。SVG はアイコン・ロゴに。

パフォーマンス: lazy loading

<!-- 初期画面外の画像は lazy で遅延読込 -->
<img src="below-fold.jpg" alt="..." loading="lazy">

<!-- LCP 画像（メインビジュアル）は eager + 高優先度 -->
<img
  src="hero.jpg"
  alt="メインビジュアル"
  loading="eager"
  fetchpriority="high">

<!-- decoding=async でメインスレッドを止めない -->
<img src="photo.jpg" alt="..." loading="lazy" decoding="async">

figure と figcaption

<figure>
  <img src="chart.png" alt="2025 年売上推移グラフ">
  <figcaption>
    図 1: 2025 年の月次売上推移（出典: 自社集計）
  </figcaption>
</figure>

<!-- 複数画像のセット -->
<figure>
  <picture>
    <source type="image/avif" srcset="photo.avif">
    <img src="photo.jpg" alt="">
  </picture>
  <figcaption>商品 A の正面・側面ビュー</figcaption>
</figure>

背景画像 vs img タグの使い分け

用途	推奨	理由
商品写真・記事内画像	<img>	意味あるコンテンツ → alt が必要
ヒーローセクションの背景	CSS background	装飾、テキストが上に乗る
装飾的アイコン	CSS background / SVG	意味なし → alt 不要
ボタンの中のアイコン	SVG inline	色変更・アニメ容易
ロゴ	<img> + alt	会社情報を SR にも
UI 装飾（罫線・パターン）	CSS background	装飾

画像最適化のチェックリスト

• 表示サイズの 1〜2 倍の解像度で書き出す（過剰な大解像度は無駄）
• JPEG 品質は 80% 程度で十分（ファイルサイズと品質のバランス）
• WebP / AVIF への変換を CI / CDN で自動化（Cloudinary, Imgix, Cloudflare Images）
• width / height 属性で CLS 防止
• 初期画面外は loading="lazy"
• LCP 画像（最大コンテンツ）は fetchpriority="high"
• SVG は svgo 等で minify
• PNG は pngquant / oxipng で圧縮

JavaScript で動的に画像

// 画像のプリロード
const img = new Image();
img.src = '/big-image.jpg';
img.onload = () => console.log('読込完了');

// IntersectionObserver で独自 lazy loading
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
        }
    });
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

// Canvas で画像加工
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.crossOrigin = 'anonymous';   // CORS 注意
image.onload = () => {
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
    const dataURL = canvas.toDataURL('image/jpeg', 0.8);
    // → 圧縮済の base64
};
image.src = 'photo.jpg';

SEO とアクセシビリティ

• alt 属性は SEO 上もスクリーンリーダー上も最重要
• ファイル名も意味のあるものに（IMG_1234.jpg ではなく kamakura-cafe.jpg）
• 構造化データ（ImageObject）でリッチリザルト化
• sitemap.xml に <image:image> を含めて Google 画像検索に
• 遅延読込は SEO 影響なし（Googlebot は lazy 対応）

FAQ

Q: width / height を指定しなくても CSS で何とかなる？
A: 見た目は OK でも、HTML パース時点で画像領域が確保されずCLS（Cumulative Layout Shift）が発生します。Core Web Vitals に悪影響です。

Q: WebP をサポートしないブラウザは？
A: 2026 年現在ほぼ無い（旧 IE くらい）。それでも <picture> でフォールバックすれば安全です。

Q: alt の文章は長くてもいい？
A: 必要な情報を伝えるのが最優先。複雑な図なら 100 文字超でも OK。あまりに長いなら aria-describedby で別 div に詳細を書きます。