图片格式转换的隐藏代价:HEIC、色彩配置与透明通道

· 约 4 分钟 🔄 图片格式转换

转图片格式看起来是改扩展名的事,实际上每次转换都涉及编码、色彩、透明、元数据四层取舍。理解这些代价能避免”转完发现照片偏色”或”PNG 转 JPG 变黑底”这类常见翻车。

主流格式速览

格式编码有损透明多帧色域浏览器
JPGDCTsRGB(多)100%
PNGDEFLATE✗(APNG 是扩展)sRGB(多)100%
WebPVP8/VP8L可选sRGB97%+
AVIFAV1可选任意95%+
HEICHEVC可选Display P3(默认)iOS / Android 13+
TIFFLZW/JPEG可选✓(多页)任意(专业)0%(不展示)
BMP部分sRGB旧 IE
GIFLZW1bit256 色100%

体积差异极大:同一张 1200×800 照片,HEIC 80KB、AVIF 90KB、JPG 280KB、PNG 1.8MB——选格式比”压缩”重要 10 倍。

HEIC 的色域陷阱

iPhone 7+ 拍照默认 HEIC,相比 JPG 体积小 50%、画质更好。但有两个坑:

1. Windows 不原生支持

需要装:

  • HEIF Image Extensions(免费)
  • HEVC Video Extensions($0.99)

或者直接转 JPG / PNG。

2. 色域从 Display P3 降到 sRGB

iPhone 屏幕是 Display P3 广色域,HEIC 原生录制 P3。转 JPG 时大多数工具默认转 sRGB——P3 中超出 sRGB 色域的鲜艳颜色会被裁剪

颜色P3 表现sRGB 转换后
火红的玫瑰鲜艳红略暗的红(最明显)
鲜橙色饱满橙略黄、略暗的橙
鲜艳青色通透青略偏蓝、略暗的青

如果是”想保留鲜艳”,转 PNG / WebP / AVIF(这些格式都支持广色域 ICC profile)比转 JPG 好。如果给非 Mac/iOS 用户分享,sRGB JPG 是最稳的兼容选择。

透明通道转换

PNG 有 alpha 通道(每像素的不透明度 0-255),JPG 没有。

转换时透明像素必须合并到一个底色上——这一步不可逆。

# ImageMagick:错误(默认黑底)
convert logo.png logo.jpg

# ImageMagick:正确(白底)
convert logo.png -background white -alpha remove logo.jpg

# 或自定义颜色(与网页背景一致)
convert logo.png -background "#f7f8fa" -alpha remove logo.jpg

实践建议:

  • logo / icon:保持 PNG / SVG,不要转 JPG
  • 照片背景图:可以转 JPG,填底色 = 网页 body 颜色
  • 要透明的素材:转 WebP 或 AVIF(都支持透明)

反复转换的画质损失

最常见的画质杀手是反复”打开 → 保存”操作:

原始 JPG → Photoshop 打开 → 另存 JPG → 再打开 → 再另存

每次保存有损格式都会引入 DCT 量化损失。无损中转也救不回——损失在第一次保存时就发生了。

实践工作流:

  1. 拍摄 / 设计阶段:保留 RAW / PSD / TIFF 原始无损
  2. 导出 / 分发阶段:从原始一次性导出最终格式
  3. 重新编辑:从原始重新导出,不要在已导出的 JPG 上继续编辑

色彩配置文件(ICC profile)

每张图可以”携带”一个 ICC profile,告诉解码器”我的 RGB 数值代表什么颜色空间”。常见 profile:

  • sRGB IEC61966-2.1:网页标准,绝大多数显示器准
  • Display P3:Apple 设备,广色域
  • Adobe RGB:单反相机默认,印刷常用
  • ProPhoto RGB:超广色域,专业摄影后期

转换时三种处理方式:

  1. 保留 profile:原 P3 图像保持 P3,色彩准确,文件略大(profile 几 KB)
  2. 转换到 sRGB 后嵌入:色域被压缩,但保证兼容性最强
  3. 直接剥离 profile:浏览器按默认 sRGB 解释——原 P3 图像看起来颜色不对(偏淡 / 偏暗)

在线转换工具大多走第 3 种——这是”颜色变了”的高频原因。本工具选项里有”保留 / 转 sRGB / 剥离”三档,可手动选。

DPI / 像素密度

DPI 是元数据,不影响实际像素数据,但影响打印尺寸部分软件的显示

72 DPI / 300 DPI 之争是误解——网页显示只看像素,DPI 完全无关;只有打印时 DPI 决定物理尺寸:

1200 × 800 像素,72 DPI → 打印 16.7 × 11.1 英寸(A3 大小)
1200 × 800 像素,300 DPI → 打印 4.0 × 2.7 英寸(明信片大小)

转换时 DPI 元数据常被工具丢弃,导致打印尺寸默认变成 72 DPI 巨幅图。要打印的图转换后手动设回 300 DPI

多帧图像

HEIC、WebP、AVIF、GIF、TIFF、APNG 都支持多帧。转换时:

  • HEIC Live Photo(视频 + 主帧):转 JPG 只保留主帧,视频丢失
  • GIF 动画 → WebP / AVIF:保留动画,体积大降(GIF 5MB → WebP 800KB)
  • GIF 动画 → JPG / PNG:只保留第一帧或某一帧
  • TIFF 多页(扫描文档常见):转 PDF 保留所有页,转 JPG 只一页

批量转换前看清原图是否多帧,免得”转完丢东西”。

Favicon 套装

网站 favicon 现在不是单一 ICO,需要:

  • favicon.ico:32×32(含 16×16 多分辨率层)
  • favicon-16x16.png / favicon-32x32.png:现代浏览器标签页
  • apple-touch-icon.png:180×180(iOS Home Screen)
  • android-chrome-192x192.png / 512x512.png:Android PWA
  • manifest.json:PWA 元数据

本工具的”Favicon 套装”按一份高分辨率 PNG 一键生成全套。手动做的话从 1024×1024 PNG 开始,缩放出每个尺寸——直接缩放比放大更稳。

一句话总结

转格式不是改扩展名——透明通道要填底色、广色域要保 ICC profile、多帧要看是否丢失,三个坑过了基本无翻车。

❓ 常见问题

iPhone 拍的 HEIC 在 Windows 上打不开怎么办?

HEIC 是 Apple 2017 年起的默认格式(基于 HEVC 视频编码),微软 Win10/11 需要单独装 HEIF Image Extensions(免费)+ HEVC Video Extensions(约 $1)才能打开。简单方式是直接转 JPG——iPhone 的"设置 → 相机 → 格式"里选"兼容性最佳"以后拍摄的就是 JPG;已存的 HEIC 用任何转换工具批量转,但注意会丢失 Display P3 广色域——HEIC 默认录制 P3,转 JPG 会被压缩到 sRGB,鲜艳红/橙色会变暗。

PNG 转 JPG 后变黑底是怎么回事?

JPG 不支持透明通道,原 PNG 的透明像素被填了 alpha = 0 的"黑色"——所以变黑底。修法是转换时指定填充色:白底(背景常见)、与目标网页背景一致的颜色、或干脆保留 PNG。本工具默认填白色,可改成任意 hex 色。批量处理时切忌用默认 ImageMagick convert a.png a.jpg——它会用黑色填充。convert a.png -background white -alpha remove a.jpg 才正确。

反复转换格式会越转越糊吗?

有损 → 任何格式 → 有损会累积损失。举例:JPG → PNG → JPG,第一次保存 JPG 已经引入压缩伪影,转成 PNG 把伪影"凝固"成精确像素值,再保存 JPG 时新的有损压缩在已有伪影基础上再加一层——画质明显下降。无损格式之间转换无损(PNG ↔ TIFF ↔ BMP)。有损 → 无损 → 有损是最常见的"画质杀手",导出工作流应该尽量保留原始有损格式直到最终用途。

转换后图片"颜色变了",是怎么回事?

大概率是色彩配置文件(ICC profile)丢失。原图嵌入的可能是 Display P3、Adobe RGB、ProPhoto 等广色域 profile,转换工具如果不读取或不嵌入,浏览器会按默认 sRGB 解释像素值——同样的 RGB 数值在不同色彩空间下显示完全不同的颜色。修法:转换时保留 ICC profile(多数专业工具默认开),或主动转换到 sRGB 后剥离 profile(统一色彩空间)。在线工具大多直接剥离,所以"颜色变了"。

🔄 打开 图片格式转换 HEIC/PNG/WebP/AVIF/BMP/TIFF 互转·透明底填色·Favicon 套装一键打包