HDR→LDRトーンマッピング:Web配信用の実務(sRGB化・階調保持・近道レシピ)
最新スマホのHDR写真やHEICをそのままWebに載せると、白飛び・黒つぶれ・色の暴れが起きがちです。 まずsRGBへ落とし、穏やかなトーン圧縮を加えて“無理のないLDR”にするのが安全です。
先に結論
- 順序はsRGB → 正規化 → ガンマ → 彩度微調整。
- 出力は AVIF/WebP/JPEG を併用して互換を担保。
- 配信は SWR/immutable の方針に沿う。
要点(TL;DR)
- “再現性”と“軽さ”を両立するには、まずsRGB固定。
- ガンマは1.4〜1.8で微調整。やり過ぎるとコントラストが眠くなる。
- 肌色の破綻はユーザーの違和感に直結。最終確認を必ず行う。
1. なぜ“近道レシピ”から始めるのか
専門的なトーンマッピングは効果的ですが、ワークフローが重くなります。まずはコストに見合う最短解で 安定させ、必要な箇所だけ高度化するのが現実的です。
2. 最短フロー(実務)
- sRGB正規化とICC/EXIF整理。
normalize
とgamma
でレンジ調整。- 肌色・ハイライトを見ながら
modulate
を数%に留める。 - AVIF/WebP/JPEGへ出力し、用途で使い分け。
3. 実装レシピ(コピペOK)
3.1 近似トーンマップの一括処理
// scripts/hdr-to-ldr.ts
// 依存: npm i -D sharp tsx
// 近似トーンマップ:sRGB化 → 正規化 → ガンマ → 彩度微調整
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";
async function main() {
await fs.mkdir(OUT, { recursive: true });
const files = (await fs.readdir(IN)).filter(f => /\.(heic|heif|jpe?g|png|tif?f|webp)$/i.test(f));
for (const f of files) {
const src = path.join(IN, f);
const name = path.parse(f).name;
// 実務向けの簡易トーンマップ(libvipsベース)
const img = sharp(src)
.toColourspace("srgb") // 広色域/HDRをsRGBへ
.normalize() // コントラストの正規化(自動)
.gamma(1.6) // ハイライト圧縮・シャドウ持ち上げ(1.4〜1.8で調整)
.modulate({ saturation: 1.02, brightness: 1.02 }) // 肌色を壊しにくい微調整
.clamp(); // 範囲外の値をクリップ
// 出力は用途別に
await img
.avif({ quality: 55, effort: 4, chromaSubsampling: "4:2:0" })
.toFile(path.join(OUT, name + ".avif"));
await img
.webp({ quality: 82 })
.toFile(path.join(OUT, name + ".webp"));
await img
.jpeg({ quality: 80, mozjpeg: true })
.toFile(path.join(OUT, name + ".jpg"));
console.log("→", name);
}
}
main().catch(e => { console.error(e); process.exit(1); });
3.2 注意点
本格的な ACES/Hable などのトーンマッピングカーブは本レシピには含みません。まずは「sRGB → normalize → gamma → modulate」の近道で“破綻しないLDR”を得ることを目的にしています。
- ガンマは 1.4〜1.8 を目安に微調整。やり過ぎると眠い絵になります。
- 強い彩度は肌色を壊しやすいので
modulate
は ±2% 程度に抑える。 - さらに画作りを詰めたい場合は、RAW現像や DCTL / 3D LUT を併用してください。
3.3 検品チェック
- 肌色が赤転び/黄転びしていない(人肌・空などの既知色で確認)。
- 白飛び/黒つぶれが解消(ヒストグラムの端に詰まりがない)。
- UI文字や線画がにじんでいない(必要に応じてサブサンプリング 4:4:4)。
4. 応用と使いどころ
- サムネは LQIP、ヒーローは Progressive。
- 色は sRGB固定。
5. 公開前チェック
- 白飛び/黒つぶれが解消している。
- 肌色が自然(赤転び/黄転びなし)。
- 出力形式とキャッシュが妥当(SWR)。
6. まとめ
HDR素材は正規化→圧縮→配信の3点セット。近道レシピでまずは“破綻しない”を獲得し、必要に応じて高度化していきましょう。