Webの色管理：sRGB固定の実務（ICC削除・広色域の扱い）
デバイスやブラウザで色がバラつく主因は色空間の不一致です。実務では素材をsRGB固定に正規化し、 EXIFの回転を適用、ICC/EXIFは原則削除で軽量化します。
先に結論
- 制作〜配信のどこかで必ずsRGBに統一（広色域→sRGB変換）。
- EXIFの回転は
.rotate()で適用、ICC/EXIFは削除。 - 配信は Cache-Controlガイド に沿って整備。
要点（TL;DR）
- “同じ見え”はsRGB統一が近道。広色域そのままは環境差でズレます。
- EXIF/ICCは容量と不確実性の原因。原則削除でOK（色はsRGB化で担保）。
- Sharpの
.toColourspace("srgb").rotate()と拡張子ごとの出力で十分。
1. なぜ sRGB 固定か
ブラウザの色管理は端末/OS依存が残り、広色域（Display‑P3等）のままでは表示差が出ます。sRGBへ正規化すれば ほぼすべての閲覧環境で“想定の見え”に収束します。
2. 最短フロー（実務）
- 受け取った素材を一括で sRGB + 回転適用。
- 形式は AVIF/WebP/JPEG を用途で出し分け。
- 配信は immutable / s-maxage / SWR を使い分け。
3. 実装レシピ（コピペOK）
3.1 sRGB正規化バッチ
// scripts/normalize-srgb.ts
// 依存: npm i -D sharp tsx
// 使い方（PowerShell）:
// $env:IN="input"; $env:OUT="output"; $env:Q=82; npx tsx scripts/normalize-srgb.ts
import fs from "node:fs/promises";
import path from "node:path";
import sharp from "sharp";
const IN = process.env.IN ?? "input";
const OUT = process.env.OUT ?? "output";
const Q = Number(process.env.Q ?? 82);
async function main() {
await fs.mkdir(OUT, { recursive: true });
const files = (await fs.readdir(IN)).filter(f => /\.(jpe?g|png|webp|avif|heic)$/i.test(f));
for (const f of files) {
const src = path.join(IN, f);
const name = path.parse(f).name;
const img = sharp(src).rotate().toColourspace("srgb"); // sRGB + 回転適用
if (/\.(avif)$/i.test(f)) {
await img.avif({ quality: 50, effort: 4, chromaSubsampling: "4:2:0" }).toFile(path.join(OUT, name + ".avif"));
} else if (/\.(webp)$/i.test(f)) {
await img.webp({ quality: 80 }).toFile(path.join(OUT, name + ".webp"));
} else {
await img.jpeg({ quality: Q, mozjpeg: true }).toFile(path.join(OUT, name + ".jpg"));
}
console.log("→", name);
}
}
main().catch(e => { console.error(e); process.exit(1); });3.2 next/image の基本
// next/image の基本（sRGB化済み素材を配信）
import Image from "next/image";
export default function Example() {
return (
<Image
src="/img/hero.jpg"
alt="Hero"
width={1600}
height={900}
priority
sizes="(min-width: 1024px) 1200px, 100vw"
/>
);
}4. 応用と使いどころ
5. 公開前チェック
- sRGB化・回転適用済み。
- ICC/EXIFを除去（容量・漏洩防止）。
- AVIF/WebP/JPEGの出し分けが妥当。
6. まとめ
迷ったらsRGB固定。その上で圧縮や配信（キャッシュ設計）を整えれば、色も速度も安定します。