什么是透明 PNG?透明背景图片的制作方法和保存时不出错的诀窍
贴上 logo 后背景留下一个白色方框,明明设成透明了,保存后却又有了背景。透明失败大多是因为选错了保存格式。本文整理透明的原理、各格式的支持情况以及确认方法。
透明靠的是“第 4 个信息”
普通图片的每个点(像素)都有红、绿、蓝 3 个值。支持透明的图片,在此基础上多了表示“不透明度”的第 4 个值,这就是 Alpha 通道。
- 不透明度 100%:下面的内容透不过来,是普通图案的部分
- 不透明度 0%:完全透明,等于什么都没画
- 介于两者之间:半透明,用于阴影的柔化或玻璃效果
重要的是,透明并不是“白色”。白色是涂上去的颜色,透明是没有颜色信息的状态。两者看起来很像,容易混淆,但一放到黑色背景上就能看出差别。如果浮现出一个白色方框,那就说明没有透明。
各格式的透明支持
| 格式 | 透明 | 半透明 | 适合的用途 |
|---|---|---|---|
| PNG | 支持 | 支持 | logo、图标、图表。需要透明时首选 |
| WebP | 支持 | 支持 | 网页发布。保持透明的同时比 PNG 更小 |
| JPEG | 不支持 | 不支持 | 照片。不保留透明,背景会被填色 |
| GIF | 支持(仅 1 种颜色) | 不支持 | 简单动画。边缘容易出现锯齿 |
| SVG | 支持 | 支持 | 图形·logo。放大也不会失真 |
GIF 的“仅 1 种颜色”,是把指定的一种颜色整体当作透明的方式。因为无法表现半透明,文字和 logo 的边缘会出现锯齿。现在要准备透明的 logo,请选择 PNG 或 WebP。
在 PNG 和 WebP 之间犹豫时,放到网站上用 WebP,发给别人或贴到资料里用 PNG 比较稳妥。WebP 的支持已经很广,但接收方的软件有时仍打不开。
转换成 JPEG 背景就会变白
把透明 PNG 转换成 JPEG 时,原本透明的部分一定会被填上某种颜色。因为 JPEG 没有 Alpha 通道,无法保存“透明”这种状态。大多数工具会填成白色。图片格式转换工具在选择 JPEG 时,也会先把透明部分填成白色再转换。
- 贴到白色背景的资料里,填成白色后看起来没有变化
- 叠在深色背景上,会残留白色方框,非常显眼
- 带半透明阴影的 logo,边缘可能出现白边
另外,把已经转成 JPEG 的图片再转回 PNG,透明也不会恢复,因为被填成白色的状态已经保存下来了。请务必保留原始的透明 PNG。
确认是否已经透明的方法
只要在白色画面上看,透明和白色看起来就是一样的。请用下面任一方法确认。
- 1
① 叠到深色背景上看看
在幻灯片或文档里放一个黑色方块,再把图片贴在上面。如果出现白色方框,就是没有透明。这是最快的确认方法。
- 2
② 确认文件格式
如果扩展名是 .jpg 或 .jpeg,那它本身就不含透明。请确认是 .png 或 .webp。
- 3
③ 用编辑软件打开
背景显示为棋盘格就是透明的。如果显示为纯白色,说明涂上了白色。
- 4
④ 放大查看边缘
即使已经透明,根据抠图时的设置,原来的背景色有时会淡淡地残留。请放大文字或 logo 的轮廓,确认有没有白色或灰色的边。
| 症状 | 原因 | 处理方法 |
|---|---|---|
| 背景变成白色方框 | 保存成了 JPEG | 从原始数据重新导出为 PNG 或 WebP |
| 轮廓残留白边 | 从白色背景抠图留下的痕迹 | 把抠图边界向内收缩 1px 后导出 |
| 只有一部分不透明 | 半透明部分被另一个图层填了色 | 在编辑软件中删除背景图层后重新导出 |
| 不同软件显示不一样 | 软件不支持 WebP 的透明 | 分发时准备 PNG |
按用途选择格式
| 用途 | 推荐格式 | 理由 |
|---|---|---|
| 网站的 logo | WebP(同时准备 PNG) | 保持透明且小巧。为不支持的环境保留 PNG |
| 贴到资料·幻灯片 | PNG | 在对方的软件中一定能打开 |
| 社交平台头像 | PNG | 上传时多半会变成不透明,但原始数据要保持透明 |
| 印刷品 | PNG 或原始数据 | 以印刷时透明被当作白色为前提来确认 |
| 照片本身 | JPEG 或 WebP | 不需要透明的话,这两种在容量上更有利 |
社交平台的头像需要注意。即使上传透明 PNG,平台也可能把背景替换成白色或黑色。为了在深色模式下轮廓不消失,最好让设计在临时加上背景色时也能成立。想在保留背景的同时减小容量时如何选择格式,也请参考PNG·JPEG·WebP 的区别。
常见问题
- 为什么透明 PNG 转成 JPEG 后背景会变白?
- 因为 JPEG 是无法保存透明度信息的格式。转换时必须给原本透明的部分填上颜色,大多数工具会填成白色。想保持透明又减小容量,请选择 WebP 而不是 JPEG。
- 透明和白色不一样吗?
- 不一样。白色是涂上的颜色,透明是没有颜色信息的状态。在白色画面上两者看起来一样,但叠到深色背景上,白色会残留成白色方框。确认时请把图片放到黑色背景上看看。
- PNG 和 WebP 该用哪个?
- 放到网站上的话,WebP 更小更有利。发给别人或贴到资料里时,考虑到可能还有打不开的环境,用 PNG 比较稳妥。两者都支持透明和半透明,画质方面的差别基本不用在意。
- 已经转成 JPEG 的图片能恢复透明吗?
- 不能。原本透明的部分已经被涂成颜色,相关信息已经不存在了。即使重新转成 PNG 也还是白色。只能重新抠图,所以请务必另外保存带透明的原始数据。
本文介绍的工具
相关文章
如何删除照片的位置信息|查看EXIF与发社交媒体前的检查
用智能手机拍的照片里,可能记录着拍摄地点的经纬度。本文整理了照片里记录了什么、哪种发送方式会保留、以及在各种设备上查看和删除位置信息的步骤。
阅读文章 →图片分辨率和dpi的区别|网页用和印刷用需要多少像素
印刷厂说“请按350dpi交稿”,可手头的图片到底符不符合要求,却很难判断。其实,图片真正的实体只有像素数,dpi只是“把这些像素印成多大”的一个指定值。本文整理了分辨率、dpi和像素之间的关系,根据纸张尺寸计算所需像素数的方法,以及为什么网页显示与dpi无关。
阅读文章 →AVIF 是什么?与 JPEG、WebP 的区别,以及打不开时的转换方法
保存的图片扩展名是陌生的 .avif,想打开时却提示不支持。AVIF 是一种能大幅减小文件体积的新图片格式,但如果接收方的软件不支持就无法使用。本文整理 AVIF 与 JPEG、WebP 的区别,适合使用和应当避免的场景,以及打不开时的转换步骤。
阅读文章 →