转图片格式看起来是改扩展名的事,实际上每次转换都涉及编码、色彩、透明、元数据四层取舍。理解这些代价能避免”转完发现照片偏色”或”PNG 转 JPG 变黑底”这类常见翻车。
主流格式速览
| 格式 | 编码 | 有损 | 透明 | 多帧 | 色域 | 浏览器 |
|---|---|---|---|---|---|---|
| JPG | DCT | ✓ | ✗ | ✗ | sRGB(多) | 100% |
| PNG | DEFLATE | ✗ | ✓ | ✗(APNG 是扩展) | sRGB(多) | 100% |
| WebP | VP8/VP8L | 可选 | ✓ | ✓ | sRGB | 97%+ |
| AVIF | AV1 | 可选 | ✓ | ✓ | 任意 | 95%+ |
| HEIC | HEVC | 可选 | ✓ | ✓ | Display P3(默认) | iOS / Android 13+ |
| TIFF | LZW/JPEG | 可选 | ✓ | ✓(多页) | 任意(专业) | 0%(不展示) |
| BMP | 无 | ✗ | 部分 | ✗ | sRGB | 旧 IE |
| GIF | LZW | ✗ | 1bit | ✓ | 256 色 | 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 量化损失。无损中转也救不回——损失在第一次保存时就发生了。
实践工作流:
- 拍摄 / 设计阶段:保留 RAW / PSD / TIFF 原始无损
- 导出 / 分发阶段:从原始一次性导出最终格式
- 重新编辑:从原始重新导出,不要在已导出的 JPG 上继续编辑
色彩配置文件(ICC profile)
每张图可以”携带”一个 ICC profile,告诉解码器”我的 RGB 数值代表什么颜色空间”。常见 profile:
- sRGB IEC61966-2.1:网页标准,绝大多数显示器准
- Display P3:Apple 设备,广色域
- Adobe RGB:单反相机默认,印刷常用
- ProPhoto RGB:超广色域,专业摄影后期
转换时三种处理方式:
- 保留 profile:原 P3 图像保持 P3,色彩准确,文件略大(profile 几 KB)
- 转换到 sRGB 后嵌入:色域被压缩,但保证兼容性最强
- 直接剥离 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 PWAmanifest.json:PWA 元数据
本工具的”Favicon 套装”按一份高分辨率 PNG 一键生成全套。手动做的话从 1024×1024 PNG 开始,缩放出每个尺寸——直接缩放比放大更稳。
一句话总结
转格式不是改扩展名——透明通道要填底色、广色域要保 ICC profile、多帧要看是否丢失,三个坑过了基本无翻车。