透明度让图片能够与任何背景无缝融合——无论是深色的网站标题、明亮的产品页面,还是印刷的传单。 没有透明度,每张图片都带有一个固体颜色的矩形,与背后的任何内容产生冲突。标志、图标、产品 切图、水印和叠加层都依赖透明度来看起来自然。
并非所有图片格式都支持透明度,而那些支持的格式处理方式也各不相同。选择正确的格式并理解 透明度的实际工作原理,将帮助您避免白色光晕、锯齿边缘和意外的文件大小膨胀。
什么是Alpha通道?
标准彩色图像每个像素存储三个值:红色(R)、绿色(G)和蓝色(B)。这三个通道组合在一起 产生任何可见的颜色。具有透明度的图像添加了第四个通道:Alpha(A),使其成为RGBA。
Alpha值控制每个单独像素的不透明度。范围从0(完全透明——像素不可见)到255(完全不透明—— 像素遮挡其后的一切)。中间值产生部分透明度。Alpha为128的像素大约是半透明的,让后面的 大约一半内容透过来。
部分透明度使平滑的抗锯齿边缘成为可能。标志或图标边缘的像素从完全着色状态逐渐过渡到 完全不可见状态,与任何背景颜色干净地融合。没有部分Alpha,边缘看起来尖锐且有锯齿—— 在正确的比例下还好,但放大或放在意外的背景上时就很难看了。
支持透明度的格式
PNG——通用选择
PNG支持完整的8位Alpha通道,为每个像素提供256个可能的不透明度级别。它是无损的, 因此保存后边缘保持完美清晰。几乎每个浏览器、操作系统、设计工具和内容管理系统都能正确 处理PNG透明度。PNG是需要保证兼容性和完美质量时最安全的格式。
权衡是文件大小。PNG使用无损压缩,这意味着文件可能比同等的JPEG或WebP大得多—— 尤其是照片或复杂场景。
WebP——更小且同样强大
WebP在无损和有损压缩模式下都支持完整的Alpha通道。透明WebP文件通常比同等的透明PNG 小约三倍。所有现代浏览器都支持WebP,使其成为当今网络透明图像的首选格式。
在网络使用中选择PNG而非WebP的唯一原因是旧版兼容性——较旧的浏览器和一些桌面应用程序 仍然无法打开WebP文件。
AVIF——最佳压缩
AVIF支持完整的Alpha透明度,并实现比WebP更好的压缩。浏览器支持迅速增长,现在已成主流。 AVIF非常适合需要最小文件大小的情况,尽管编码比PNG或WebP慢。
GIF——仅有限的1位透明度
GIF支持透明度,但只是以二进制、开关方式——每个像素要么完全透明要么完全不透明,没有 中间状态。这称为1位透明度。
结果是锯齿状、有走样的边缘。由于边缘像素不能是部分透明的,它们被迫选择一边:要么 前景色,要么完全透明。结果是硬边阶梯状边缘,而不是平滑渐变。GIF透明度对于具有直线 边缘的简单几何形状效果尚可,但对于具有弯曲字母的标志、具有柔和阴影的图标或任何 摄影内容来说效果很差。
SVG——无限缩放,完全透明度控制
SVG是一种矢量格式,以数学方式描述形状而不是存储像素数据。SVG中的透明度通过CSS风格的 不透明度和fill属性表达,由于图像与分辨率无关,它可以缩放到任何大小而不会损失质量。 SVG非常适合需要在16×16和1600×1600像素下都清晰的标志、图标和插图。
HEIC——支持Alpha
iPhone使用的HEIC支持完整的Alpha透明度,尽管Apple生态系统之外的软件支持仍然有限。
JPEG / JPG——不支持透明度
JPEG根本不支持Alpha通道。如果将透明图像保存为JPEG,透明区域将被纯色填充—— 通常是白色或黑色。JPEG文件中无法保留透明度。
GIF透明度限制详解
由于GIF只能将调色板中的一种颜色标记为"透明",您最终会得到硬像素边缘。抗锯齿—— 通过在前景色和背景色之间混合边缘像素来平滑曲线和对角线边缘的技术——无法正常工作。 如果抗锯齿是为白色背景而做的,那些浅灰色边缘像素在深色背景上会显示为白色光晕。 这有时被称为"光晕效果"或"遮罩颜色渗出"。
对于网络动画,GIF已经大部分被支持适当Alpha透明度的WebP动画图像和视频格式所取代。
何时需要透明度
当图像将出现的背景各不相同或未知时,请使用透明图像。常见情况包括:
- 标志 — 公司标志无论放在白色页面、深色导航栏、彩色按钮还是打印文档上, 都应该看起来正确
- 电商网站的产品图片 — 具有透明背景的切图产品照片可以放在任何页面 颜色或图案上
- 应用和UI图标 — 图标需要干净地坐落在操作系统或主题应用的任何表面颜色上
- 水印和叠加层 — 半透明叠加层在传达水印的同时让内容可见
- 贴纸和装饰元素 — 任何打算叠加在其他内容之上的图形
何时不需要透明度
透明度会增加开销。PNG和WebP透明文件比相同视觉内容的JPEG等效文件更大。如果您的图像 将始终出现在已知的固定背景上,请将其压平——将背景颜色烘入图像并保存为JPEG。
坚持使用不透明格式用于:
- 照片和摄影内容
- 全页英雄图像或背景
- 具有一致背景的缩略图和预览图像
- 背景永远不会改变的任何图像
将照片保存为透明PNG是一个常见错误,会无谓地膨胀文件大小。请改用JPEG或有损WebP。
如何移除背景并创建透明度
如果您有一张想要移除纯色背景的照片或图像,您不需要复杂的软件。Picovert的 背景移除 工具使用AI自动检测主体并移除背景, 生成一个可以在任何地方使用的透明PNG。
透明图像的PNG vs WebP
对于网络使用,WebP在几乎所有情况下都是更好的选择。透明WebP比同等的透明PNG大约小三倍, 这意味着更快的页面加载和更少的带宽消耗。所有现代浏览器都支持带Alpha的WebP。
PNG仍然是作为工作或存档格式的更好选择。设计工具、照片编辑器和内容管理系统普遍处理PNG。 将主文件保存为PNG,并转换为WebP进行交付。当您需要最大兼容性时——例如在电子邮件附件、 演示文稿或WebP支持之前的软件中——PNG仍然值得优先考虑。
在保留透明度的同时转换格式
在格式之间转换时,如果目标格式不支持透明度,很容易意外丢失Alpha通道。Picovert的 图片转换 工具在PNG、WebP和AVIF之间转换时保留Alpha通道, 因此您的透明背景保持透明。
避免将透明图像转换为JPEG——转换器会警告您,但如果继续,透明区域将被白色填充。 在发布之前始终检查您的输出。
透明图像准备好后,您可以在不影响Alpha通道的情况下进一步减小文件大小。Picovert的 图片压缩 工具在保持透明度不变的同时压缩PNG和WebP文件, 让您获得更小的文件而不会损失任何质量或边缘精度。