HEIC/HEIFのWeb最適化—アップロードから配信まで

結論（TL;DR）

• WebではHEICを直接配信しない（互換・色管理のリスク）。
• アップロード時にEXIF Orientation適用＋sRGB変換＋メタ削除で正規化。
• 配信用にAVIF（写真）、WebP（互換）、JPEG（最終フォールバック）を生成。
• 配信はsrcset/sizesで実幅に一致。LCPはfetchpriority=high＋preload。

1. なぜHEICを直接配信しないか

• 互換性：古いブラウザ/アプリ/メールクライアントが非対応。
• 色管理：P3/HEIFの扱いは実装差が大きく、色ズレの温床。
• CDN/最適化：変換系のミドルウェアやCDN機能がHEICを素通しするケースが多い。

2. 変換パイプライン（Sharp例）

import sharp from "sharp";

const src = sharp(inputBuffer, { unlimited: true })
  .rotate()                         // EXIF Orientation を適用
  .withMetadata({ orientation: 1 }) // 正規化
  .toColourspace("srgb");           // sRGBへ

// 写真向け：AVIF（推奨）
await src.clone().avif({ quality: 62, effort: 6, chromaSubsampling: "4:2:0" }).toFile("out.avif");

// 互換：WebP
await src.clone().webp({ quality: 82, effort: 5 }).toFile("out.webp");

// 最終フォールバック：JPEG（高品質）
await src.clone().jpeg({ quality: 85, chromaSubsampling: "4:2:0" }).toFile("out.jpg");

生成後は不要メタをstrip。EXIFを公開したくない場合は EXIF削除 を徹底。

3. P3→sRGBの注意（彩度落ち）

• 赤/蛍光系は彩度が落ちやすい。必要に応じて軽い彩度補正（例：Sharp modulate({ saturation: 1.06 }）。
• 配布はsRGB統一。P3の演出はCSSで行う（関連： P3運用戦略）。

4. 配信：srcset/sizes と優先度

<link
  rel="preload"
  as="image"
  href="/img/hero-1200.avif"
  imagesrcset="/img/hero-800.avif 800w, /img/hero-1200.avif 1200w"
  imagesizes="(max-width: 768px) 92vw, 1200px"
/>
<img
  src="/img/hero-1200.avif"
  srcset="/img/hero-800.avif 800w, /img/hero-1200.avif 1200w"
  sizes="(max-width: 768px) 92vw, 1200px"
  alt="ヒーロー"
  width="1200" height="720"
  fetchpriority="high"
/>

実表示幅に合わせた srcset/sizes はLCP/CLSの双方に効きます（詳細： レスポンシブ画像ガイド）。

5. エッジケース（Live Photo/シーケンス/深度）

• Live Photoは動画成分を含む。静止画フレームのみ抽出して扱う。
• HEIFシーケンス（連写/バースト）は最良フレームを選定。
• 深度マップ同梱は無視してOK（特殊演出が必要な場合のみ活用）。