图片·设计发布日期 更新日期 阅读时间约 7 分钟

什么是透明 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. 1

    ① 叠到深色背景上看看

    在幻灯片或文档里放一个黑色方块,再把图片贴在上面。如果出现白色方框,就是没有透明。这是最快的确认方法。

  2. 2

    ② 确认文件格式

    如果扩展名是 .jpg 或 .jpeg,那它本身就不含透明。请确认是 .png 或 .webp。

  3. 3

    ③ 用编辑软件打开

    背景显示为棋盘格就是透明的。如果显示为纯白色,说明涂上了白色。

  4. 4

    ④ 放大查看边缘

    即使已经透明,根据抠图时的设置,原来的背景色有时会淡淡地残留。请放大文字或 logo 的轮廓,确认有没有白色或灰色的边。

症状原因处理方法
背景变成白色方框保存成了 JPEG从原始数据重新导出为 PNG 或 WebP
轮廓残留白边从白色背景抠图留下的痕迹把抠图边界向内收缩 1px 后导出
只有一部分不透明半透明部分被另一个图层填了色在编辑软件中删除背景图层后重新导出
不同软件显示不一样软件不支持 WebP 的透明分发时准备 PNG

按用途选择格式

用途推荐格式理由
网站的 logoWebP(同时准备 PNG)保持透明且小巧。为不支持的环境保留 PNG
贴到资料·幻灯片PNG在对方的软件中一定能打开
社交平台头像PNG上传时多半会变成不透明,但原始数据要保持透明
印刷品PNG 或原始数据以印刷时透明被当作白色为前提来确认
照片本身JPEG 或 WebP不需要透明的话,这两种在容量上更有利

社交平台的头像需要注意。即使上传透明 PNG,平台也可能把背景替换成白色或黑色。为了在深色模式下轮廓不消失,最好让设计在临时加上背景色时也能成立。想在保留背景的同时减小容量时如何选择格式,也请参考PNG·JPEG·WebP 的区别。

常见问题

为什么透明 PNG 转成 JPEG 后背景会变白?
因为 JPEG 是无法保存透明度信息的格式。转换时必须给原本透明的部分填上颜色,大多数工具会填成白色。想保持透明又减小容量,请选择 WebP 而不是 JPEG。
透明和白色不一样吗?
不一样。白色是涂上的颜色,透明是没有颜色信息的状态。在白色画面上两者看起来一样,但叠到深色背景上,白色会残留成白色方框。确认时请把图片放到黑色背景上看看。
PNG 和 WebP 该用哪个?
放到网站上的话,WebP 更小更有利。发给别人或贴到资料里时,考虑到可能还有打不开的环境,用 PNG 比较稳妥。两者都支持透明和半透明,画质方面的差别基本不用在意。
已经转成 JPEG 的图片能恢复透明吗?
不能。原本透明的部分已经被涂成颜色,相关信息已经不存在了。即使重新转成 PNG 也还是白色。只能重新抠图,所以请务必另外保存带透明的原始数据。

本文介绍的工具

相关文章