gazou-compressor.jp

HDR→LDRトーンマッピング:Web配信用の実務(sRGB化・階調保持・近道レシピ)

最新スマホのHDR写真やHEICをそのままWebに載せると、白飛び・黒つぶれ・色の暴れが起きがちです。 まずsRGBへ落とし、穏やかなトーン圧縮を加えて“無理のないLDR”にするのが安全です。

先に結論
  • 順序はsRGB → 正規化 → ガンマ → 彩度微調整
  • 出力は AVIF/WebP/JPEG を併用して互換を担保。
  • 配信は SWR/immutable の方針に沿う。

要点(TL;DR)

1. なぜ“近道レシピ”から始めるのか

専門的なトーンマッピングは効果的ですが、ワークフローが重くなります。まずはコストに見合う最短解で 安定させ、必要な箇所だけ高度化するのが現実的です。

2. 最短フロー(実務)

  1. sRGB正規化とICC/EXIF整理。
  2. normalizegamma でレンジ調整。
  3. 肌色・ハイライトを見ながら modulate を数%に留める。
  4. 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 検品チェック

4. 応用と使いどころ

5. 公開前チェック

6. まとめ

HDR素材は正規化→圧縮→配信の3点セット。近道レシピでまずは“破綻しない”を獲得し、必要に応じて高度化していきましょう。

公開:2025-09-03

gazou-compressor.jp 編集部

画像圧縮・変換・背景除去などの実践テクニックと、Webで“速く・軽く・崩さない”ためのノウハウを発信しています。

関連記事