SVG vs PNG vs WebP：哪种格式最适合网页图形？
简短的答案（以及为什么事情没那么简单）
这里没有绝对的赢家。SVG、PNG 和 WebP 各有其特定的用途，选错了格式会让你付出代价——文件体积臃肿、图像质量差，或是浏览器兼容性问题让你头疼。一个本可以是 4 KB 的 SVG logo，你却用了 340 KB 的 PNG，这对你的用户来说就是一笔实实在在的性能税。另一方面，试图将一张细节丰富的照片保存为 SVG，这不仅仅是理论上的错误，而是完全没法用，因为 SVG 根本无法表示照片中数百万个像素点。 本文将从网页项目的实际需求出发，为你剖析每种格式：它们如何缩放、最终文件大小、浏览器支持度、透明度，以及各自最擅长的领域。我们还会介绍具体的转换工作流程，包括你可以用 CocoConvert 做什么，以及在哪些情况下你可能需要寻找其他工具。
SVG：Logo、图标和插图的正确选择
SVG 的全称是可缩放矢量图形（Scalable Vector Graphics），但它真正的意思是*没有像素*。它是一种基于 XML 的格式，使用数学路径和形状来描述图像。因为它本质上是数学公式，所以 SVG 在任何尺寸下都能呈现出完美的清晰度，无论是在一个 16×16 的小 favicon 上，还是在 5K 显示器上。这使得它成为处理 Logo、图标、图表以及任何由清晰线条和形状构成的插图的唯一合理选择。 简单的 SVG 文件体积小得惊人。一个典型的公司 Logo，经过优化后，可以小到 2-8 KB。当你用 SVGO 这样的优化器处理它时（CocoConvert 在导出 SVG 时会自动使用），通过剥离编辑器产生的垃圾信息、合并路径以及将小数精度从六位减少到两位，通常还能再削减 20-40% 的体积。 SVG 真正强大的地方在于：它支持通过 CSS 和 JavaScript 实现交互和动画，这是 PNG 和 WebP 望尘莫及的。你只需一行 CSS 代码 `svg path { fill: #0057ff; }` 就可以在鼠标悬停时改变图标颜色。对于现代 UI 组件来说，这种灵活性是颠覆性的。 但它的局限性也很明显。千万别想着用 SVG 来处理照片。试图将照片导出为 SVG，要么会得到一个巨大且加载缓慢的文件，要么会得到一个色调分离、抽象得一塌糊涂的鬼东西。此外，由于 SVG 文件只是文本，它们会暴露你的源路径——如果你的插图是不想被轻易复制的专有艺术品，这可不是什么好事。最后，对于极其复杂的 SVG，比如包含数千个独立节点的详细地图，浏览器渲染它的速度实际上可能比渲染一张压缩得当的光栅图像还要慢。
PNG：当你需要保留每一个像素时的无损画质
PNG，即便携式网络图形（Portable Network Graphics），是一种无损光栅格式。这意味着它会原封不动地保存每一个像素，没有任何压缩瑕疵。正是这种完美的保真度，使其成为截图、UI 模型图以及任何包含清晰文本的图像的标准格式，在这些场景下，你需要像素级的精确度和干净的透明度。PNG 的 8 位 Alpha 通道提供 256 个级别的透明度，能给你带来平滑的羽化边缘。 代价就是文件体积。一张 1200×800 的 PNG 截图，大小很容易就达到 800 KB 到 1.2 MB。PNG 的 DEFLATE 压缩算法是无损的，但压缩率并不高。对于照片而言，在同等视觉质量下，PNG 文件通常比 JPEG 或 WebP 大两到四倍。 PNG 在需要多次编辑的工作流程中真正大放异彩。因为它是无损的，你可以打开、编辑、再保存一个 PNG 文件一百次，而不会降低其质量。任何见过 JPEG 在几次保存后变得面目全非、满是噪点的人都懂这种痛。如果你正在创建一个需要交付给他人后续编辑的资产——比如一个给开发者裁剪的 UI 元素——PNG 是最稳妥的交付格式。 你会看到“PNG-8”和“PNG-24”的说法。PNG-8 限制在 256 种颜色（类似 GIF），适用于简单的扁平图形。PNG-24 支持 1600 万种颜色，外加完整的 Alpha 通道以实现透明度。大多数工具默认使用 PNG-24。当你从 CocoConvert 导出时，它会生成 PNG-24，除非源图像的调色板非常简单，此时它可能会自动使用 PNG-8 来优化文件大小。 PNG 的主要弱点是缺乏原生动画支持。虽然存在动画 PNG（APNG），但工具的支持情况参差不齐。对于动画，你最好选择 WebP，或者理想情况下，使用 SVG/CSS 动画。
WebP：现代的压缩主力
WebP 由谷歌在 2010 年开发，其普及过程比较缓慢，但当 Safari 14 在 2020 年左右增加支持后，它终于成为了主流。截至 2026 年年中，所有主流浏览器——Chrome、Firefox、Safari 和 Edge——都支持 WebP，根据 caniuse.com 的数据，覆盖了全球约 97% 的用户。 WebP 是一个多面手，同时支持有损和无损压缩、透明度，甚至动画。在大多数网页应用场景中，它可以有效地取代 JPEG、PNG 和 GIF。它的压缩能力是其最大亮点：在同等视觉质量下，有损 WebP 图像通常比 JPEG 小 25-35%，而无损 WebP 比 PNG 小约 26%。这些可不是营销口号；它们来自谷歌的大规模测试，并得到了独立基准测试的证实。 我们来看个实际的例子。一张 180 KB 的 JPEG 主图，在质量设置为 80 的情况下保存为有损 WebP，可能会变成 130 KB。如果把质量提高到 85，它可能是 145 KB——仍然更小，但细节更丰富。你可以在 CocoConvert 的 WebP 选项中找到这些设置，就在“输出质量”滑块下。对于照片，75-85 的值是一个很好的起点；而对于清晰度至关重要的 UI 资产，你可能需要推到 90 以上。 当然，WebP 并非完美。首先，它严格用于屏幕显示；由于缺乏 CMYK 支持，对于印刷流程来说完全派不上用场。它在旧版软件上也遇到过一些初期问题——Adobe Photoshop 直到 CC 2022 才提供原生支持。对于简单的扁平图形，它相对于 PNG 的优势微乎其微；而对于 Logo 和图标，SVG 仍然是小文件体积领域无可争议的王者。
正面交锋：文件大小与质量基准测试
纸上谈兵终觉浅。下面我们通过两个有代表性的测试案例，看看这三种格式的表现如何。 **测试 1：公司 Logo（扁平颜色，透明背景，400×200 px）** - SVG（经 SVGO 优化）：3.8 KB - PNG-24：12.4 KB - WebP 无损：9.1 KB - WebP 有损（质量 90）：7.2 KB（在锐利边缘处有轻微的色彩条带） 对于 Logo 来说，SVG 以压倒性优势胜出。如果出于某种原因不能使用 SVG，WebP 无损格式是一个不错的第二选择。PNG 体积最大，但提供了完美的保真度。 **测试 2：产品照片（全彩，无透明度，1200×800 px）** - SVG：不适用（无法有效表示照片数据） - PNG-24：1.14 MB - JPEG（质量 85）：187 KB - WebP 有损（质量 80）：134 KB - WebP 有损（质量 75）：108 KB（仔细看能发现轻微的柔化） 对于照片，WebP 在文件大小上是显而易见的赢家。这么大的 PNG 文件只应该用作后续编辑的母版文件，绝不应该用在实际的网页上。 这里需要了解 CocoConvert 的一个实际限制：你无法在一次导出任务中同时生成 WebP 版本和 PNG 备用版本。你需要运行两次独立的转换，然后自己实现 HTML 的 `<picture>` 元素来提供正确的格式。这是其工作流程中的一个短板，你最好现在就知道，而不是在项目进行到一半时才发现。
浏览器支持、备用方案和 `<picture>` 元素
SVG 和 PNG 十多年来已经获得了所有主流浏览器的支持。你根本不需要考虑兼容性降级方案。WebP 现在也得到了广泛支持，但如果你必须支持使用旧版企业浏览器或带有嵌入式 Web 视图的传统应用的用户，你可能会遇到兼容性问题。 标准的解决方案是使用优雅的 HTML `<picture>` 元素。它允许你列出多个源，浏览器会简单地选择它能理解的第一个。 ```html <picture> <source srcset="hero.webp" type="image/webp"> <img src="hero.png" alt="Product hero image"> </picture> ``` 浏览器从上到下读取，使用第一个支持的源。这种模式几乎不增加任何开销，却能让你既能享受到 WebP 的性能优势，又有 PNG 作为坚如磐石的后备方案。 对于 SVG，最大的兼容性陷阱不是浏览器，而是电子邮件客户端。在 HTML 电子邮件中对 SVG 的支持简直是一场灾难；Windows 上的 Outlook 只会显示一个损坏的图像。说真的，不要在邮件模板中使用 SVG。直接用 PNG，省得你将来处理没完没了的用户反馈工单。对于网页和应用程序，SVG 是完全安全的。 关于 SVG 和内容安全策略（CSP）的简要说明：如果你将 SVG 直接嵌入到 HTML 中，它会继承页面的 CSP。如果你通过 `<img>` 标签将其作为外部文件加载，它就无法运行脚本。这是一项安全特性。如果你的 SVG 需要通过 JavaScript 进行交互，你必须要么将其内联到 HTML 中，要么使用 `<object>` 标签加载它。
做出正确选择：一个决策框架
在看完了所有基准测试和注意事项后，实际的决策树是这样的： **在以下情况使用 SVG：** 图形是 Logo、图标、图表或任何由形状和路径构成的插图。你拥有来自 Illustrator、Figma 或 Inkscape 等工具的矢量源文件。你希望它在各种屏幕密度下都保持清晰，而无需创建独立的 @2x 和 @3x 资产。你想用 CSS 控制颜色或添加悬停效果。 **在以下情况使用 PNG：** 图像是 UI 截图或包含清晰文本，有损压缩会导致效果惨不忍睹。你需要透明度但不能使用 WebP。该文件需要作为无损母版以备将来编辑。你正在为邮件营销活动发送资产，或交付给可能没有现代图像软件的客户。 **在以下情况使用 WebP：** 图像是用于现代网站的照片或其他复杂的光栅图形。你的首要任务是获得最佳的文件大小与质量比。你能够实现 `<picture>` 元素作为备用方案，或者你的 CMS/CDN（如 Cloudflare Images、Imgix 或 Cloudinary）能自动为支持的浏览器提供 WebP，从而为你处理好这一切。 要在 CocoConvert 中转换这些格式，只需上传你的文件，从下拉菜单中选择目标格式，然后下载即可。如果你要转换为 WebP，可以调整“输出质量”滑块——默认的 85 对于照片来说是个不错的起点。对于批量任务，比如将整个文件夹的 PNG 转换为 WebP，Pro 套餐支持一次性处理多达 50 个文件。所有 SVG 导出都会自动进行优化，无需任何配置。 有一种情况，以上这些都不是最佳选择：动画。是时候说出来了：对于生产环境的 Web 应用，GIF 已经死了。尽管它的文化影响力经久不衰，但它创建的文件比 WebP 动画大 3-5 倍。对于简短、简单的循环动画，使用 CSS 动画（零图像文件开销）。对于复杂的矢量动态图形，使用 Lottie/SVG 动画。只有在处理光栅内容的动画时，才把 WebP 动画作为最后手段。