给 Logo 加个增益图（Gain Map）就能在 HDR 屏幕上让

最近在刷 LinkedIn 的时候发现个很有意思的视觉细节，有些公司的 Logo 看起来比周围的 UI 元素要亮得多，甚至有一种自带背光、在屏幕上“跳”出来的感觉。我专门去钻研了一下，发现这并不是视觉错觉，而是通过在 JPEG 图片里嵌入 Gain Map（增益图）实现的。

这种技术专门针对 HDR 显示器（比如新款 MacBook Pro 的 XDR 屏幕）起作用。普通的 SDR 图片在这些高亮度屏幕上只能显示常规亮度，但如果图片里带了增益信息，浏览器就能识别并调高那一块区域的像素亮度。目前 LinkedIn 是唯一一个还没把这种 metadata 抹掉的社交平台，不过如果你是在自己的官网或者产品里用，完全可以自己控制。

为了搞清楚这玩意儿怎么自动化处理，我直接开了 Claude Code，让它帮我写了一个基于浏览器的工具，省去了本地配置复杂的图像处理库的麻烦。

这里分享一下实现这种效果的核心逻辑，如果你想自己写个脚本处理一批 Logo，可以参考这个处理思路：

实现步骤与逻辑

1. 提取亮度信息：首先需要一张高质量的原始 Logo 图片（最好是纯色或高对比度）。
2. 生成增益图：创建一个与原图尺寸一致的灰度图，其中亮度需要极高的部分用白色表示，不需要提亮的部分用黑色表示。
3. 嵌入 Metadata：利用工具将这张增益图作为 Gain Map 写入 JPEG 的文件头中。

我让 Claude Code 辅助生成的处理逻辑伪代码如下，你可以参考这个工作流来构建自己的自动化工具：

// 伪代码逻辑：处理 HDR 增益图嵌入
async function generateHDRLogo(originalImage, gainMapCanvas) {
  // 1. 将原始图像转换为基础 JPEG 格式
  const baseBuffer = await convertToJPEG(originalImage);
  
  // 2. 获取增益图的像素数据
  const gainData = gainMapCanvas.getContext('2d').getImageData(0, 0, width, height);
  
  // 3. 使用特定的编码器将 Gain Map 写入 JPEG 的 Metadata 区块
  // 注意：这需要支持 ISO 21496-1 标准的编码器
  const hdrBuffer = await encodeJPEGWithGainMap(baseBuffer, gainData);
  
  return hdrBuffer;
}

避坑指南

• 兼容性问题：这种图片在普通 SDR 屏幕上看起来就是一张普通的 JPEG，不会有任何副作用，这点非常友好。
• 文件体积：虽然增益图增加了信息量，但因为是嵌入在 Metadata 里，体积增加并不明显，但一定要注意压缩比，过度压缩会导致增益信息丢失。
• 浏览器支持：目前主要是 Safari 和 Chrome 对 HDR 内容的支持比较成熟，开发时建议先在 MacBook Pro 的屏幕上实测。

如果你觉得这种视觉上的“高级感”对品牌展示很重要，确实值得在设计规范里加上这一项。