過去バージョン

基本: img 要素

主要属性

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

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

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

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

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

画像フォーマットの比較

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

パフォーマンス: lazy loading

figure と figcaption

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

用途	推奨	理由
商品写真・記事内画像		意味あるコンテンツ → alt が必要
ヒーローセクションの背景	CSS background	装飾、テキストが上に乗る
装飾的アイコン	CSS background / SVG	意味なし → alt 不要
ボタンの中のアイコン	SVG inline	色変更・アニメ容易
ロゴ	+ 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 に を含めて Google 画像検索に
• 遅延読込は SEO 影響なし（Googlebot は lazy 対応）

FAQ

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

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

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