この記事の要点

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

基本: img 要素

主要属性

属性	意味	推奨
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 属性のベストプラクティス

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

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

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

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

画像フォーマットの比較

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

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 に詳細を書きます。