PNG、JPEG、WebP 与 AVIF：有意识地选择图片格式 | Toolars

无损格式逐位保存每个像素；有损格式丢弃人眼几乎察觉不到的细节，换来大幅缩小的体积。这个选择无关品位——而在于文件的用途：是要反复编辑的母版，还是只交付一次的产物。

无损保留一切无损（PNG，以及 WebP 与 AVIF 的无损模式）：解码后逐位还原原始像素，无论打开和另存多少次都不会劣化。
有损消耗细节有损（JPEG，以及 WebP 与 AVIF 的有损模式）：编码器模拟人眼视觉，丢弃它预测你不会察觉的信息——这份节省是永久的，不存在事后可以剥离的一层。
母版与交付物实践上的划分：母版用无损保存，交付用有损导出，绝不要把有损导出当作下一次编辑的源。

压缩格式各有所长。JPEG 的余弦变换偏爱平滑的照片渐变、却会毁掉锐利边缘；PNG 的 deflate 偏爱平坦色块与精确线条、却会把噪点多的照片撑大；WebP 与 AVIF 借用视频编解码器的技巧，两者都能处理得不错。

照片照片与渐变：中等质量的 JPEG 比 PNG 小得多，且在交付尺寸下损失不可见——这正是有损格式为之而生的负载。
平面图形Logo、图标、界面截图与线条画：平坦区域与锐利边缘在 PNG 中压缩得干净利落，而 JPEG 会在每个硬过渡周围留下可见的振铃。
混合内容混合内容，比如内含照片的截图：两种都试——WebP 常常落在两种老格式之间，但决定权在像素构成，而不在标签上。

如果版面需要透出背景，格式就必须携带 alpha 通道。PNG、WebP 与 AVIF 都支持透明度；JPEG 不支持——把图像压平到纯色背景上不是可选项，而是必然。

Alpha 是逐像素的Alpha 通道在颜色之外逐像素存储不透明度，这正是 Logo 能干净地落在任何背景上、而不是坐在一块白色矩形上的原因。
JPEG 会压平把透明 PNG 转成 JPEG 时，alpha 会被替换成实色打底；要有意识地选择这个底色，因为它会永久进入像素。
选对打底色图片格式转换器会如实说明这次压平，并要求你选择使用的背景色，让这笔取舍明明白白，而不是日后在版面里才被发现。

WebP 在所有现代浏览器中都能解码；AVIF 能在当前的 Chrome、Firefox 与 Safari 中解码，但在旧浏览器和部分下游工具中不行。支持是目标端的属性，而不是格式的属性——承诺整批交付前，先检查真实的管线。

目标端说了算编码支持滞后于解码：有些浏览器能显示 WebP，却无法通过 Canvas 编码它，所以转换器必须探测能力，而不是想当然。
编码需要探测图片格式转换器会预先进行这项探测，在缺少编码能力时禁用 WebP 导出，而不是默默地塞给你一个名叫 .webp 的 PNG。
诚实处理 AVIFAVIF 输入只有在浏览器确实能解码时才会被接受；不能解码时，工作区会明说，并请你先导出 PNG 或 JPEG，而不是轻信文件签名。

每次有损保存都会对已经近似过的图像再次量化，失真因此叠加：同一张图第三次另存为 JPEG，在相同质量档位下也明显比第一次更糟。只转换一次，在管线末端，用你手里最好的源。

只转换一次在无损母版中编辑，把有损导出作为最后一步；每一次中间的有损保存都是一代无法撤销的损伤。
附带影响Canvas 重编码还会丢弃 ICC 色彩配置、EXIF 元数据与任何动画——GIF 会以其第一帧的形式进入，工作区会在文件旁边如实说明。
保留原图转换后保留原图；转换结果是交付产物，不是母版，反向转换永远找不回已经花掉的细节。

在字节数说话之前，格式建议都只是假设。图片格式转换器按实际产出的字节如实报告转换前后的体积，JPEG 与 WebP 质量可在 0.50 到 0.95 之间调节（默认 0.85），于是权衡变成屏幕上的数字，而不是民间传说。

用真实文件转换用真实文件转换，而不是样本：字节节省取决于实际内容，报告会并排展示两种体积。
像素是杠杆字节仍然超预算时，像素是下一个杠杆：宽和高各减半大约去掉四分之三的像素，往往比任何换格式都省。
明确的限制两个工具都接受最大 12 MiB、单边最长 8,192 像素的文件，缩放器还能锁定纵横比，让一个维度跟随另一个。