压缩 PNG 用于网页
压缩 PNG 的预设方案
为网站优化 PNG：128 色加抖动，在 Logo、图标和 UI 截图上与原图几乎无法分辨，同时能把文件体积削减一半以上。更小的图片是提升 Core Web Vitals 分数最快的途径。
- 文件永不离开你的设备
- 免费，无需注册
- 无水印
- 加载后可离线使用
如何压缩 PNG
- 1
添加 PNG 图片
将 PNG 文件拖到页面上、点击浏览选择，或直接从剪贴板粘贴。
- 2
选择颜色数量
256 色对大多数图形来说在视觉上是无损的。数值调低可以获得更小的文件。
- 3
下载
单独保存每张优化后的 PNG，或将整批打包为 ZIP 下载。
PNG 在网页上真正应该承担的角色
在一个现代网站上，PNG 应该承担的是一类明确而相对狭窄的内容：Logo、图标、UI 截图、图表，以及任何需要透明背景的元素。所有照片类内容都应该属于 JPEG 或 WebP。图片性能预算超支的网站，通常都是把照片当作 PNG 来提供，任何压缩设置都无法挽救这一点——需要的是格式上的改变，而不是调色板上的调整。
对于那些真正应该是 PNG 的素材，128 色加抖动几乎是一个通用的答案。界面元素和品牌标识本来就是用一套精心设计的小型调色板构建的，把可用颜色数量减半去掉的是冗余，而不是信息本身，肉眼看到的结果与原图几乎一致，字节数却只有大约一半。
与 SVG、WebP 相比该如何取舍
如果一个 Logo 或图标本身就是矢量图，SVG 在任何情况下都完胜任何位图格式：只有几百字节的标记代码，在任何缩放级别和任何显示密度下都保持锐利，还可以用 CSS 进行样式控制。如果你手上有原始矢量文件，就应该使用它。PNG 是在你没有矢量文件、或者作品带有无法矢量化保留的效果时的备选方案。
WebP 同样支持透明度，在相同内容下通常比 PNG 更小，并且所有现代浏览器都已支持。仍然选择提供 PNG 的原因，是为了兼容浏览器之外的软件——邮件客户端、较旧的设计工具，以及同事可能用来打开文件的各种软件。对于只会在你自己页面上渲染的素材，WebP 才是更好的默认选择，本站也提供相应的转换工具。
- 手上有矢量源文件
- 使用 SVG。它比任何位图导出都更小，并且在任何屏幕上都保持锐利。
- 仅在浏览器中渲染的位图素材
- 使用带透明度的 WebP。在同等画质下比 PNG 更小。
- 需要在任何地方都能打开
- 使用压缩后的 PNG。兼容性最广，且依然无损。
常见问题
PNG 明明是无损格式，压缩是怎么起作用的？
PNG 容器本身依然保持无损——发生变化的是容器内部的图像。减少不同颜色的数量会让数据变得更有规律性，PNG 内置的 deflate 压缩算法随后就能把它压得更紧。这与 pngquant 和 TinyPNG 采用的方法是一致的。
透明度会被保留吗？
会的。Alpha 通道完全不受影响，完全透明的像素会被排除在调色板计算之外，不会拉偏调色板。Logo 和抠图图形都能保持边缘干净。
为什么节省的体积比 TinyPNG 给出的要小？
浏览器只能写出 32 位 PNG，而不是真正的 8 位调色板 PNG，所以我们能达到的效果大约是原生优化工具的一半。作为交换，你的文件永远不会离开你的设备，也没有每月使用限制。对 Logo 和平面图形来说差距很小；对照片来说差距会更大。
抖动（dithering）起什么作用？
它把舍入误差分散到相邻像素之间，让渐变保持平滑，而不是形成明显的色带。这会让文件体积增加几个百分点，但对照片和渐变内容来说是值得开启的——对于平面图形和截图，建议关闭它。
我应该用 PNG 吗？
对照片来说不应该——同等质量下 JPG 或 WebP 能小上好几倍。PNG 适合 Logo、图标、文字截图，以及任何需要透明度的场合。