核心结论
网页图片格式选型不能只问哪个文件更小。用户感受到的是首屏何时可见、滚动时是否卡顿、旧设备能否解码、构建链路是否稳定,以及出错时是否有可靠回退。压缩率只是其中一个指标,单张静态对比图很容易给出错误答案。
网页图片格式要解决什么
有损图片的比较至少固定五个变量。原图类型要覆盖照片、文字截图、插画和带透明通道的素材。质量目标应基于视觉可接受度,而不是只把编码器设成相同数值。编码时间决定构建和上传成本,解码时间影响移动端体验,输出大小影响带宽。浏览器覆盖率和 CDN 是否能按 Accept 协商,则决定格式能否真正交付给用户。
现代格式通常提供更多工具,例如更灵活的色彩深度、渐进显示、无损模式或对旧格式的重新封装。这些能力适合特定工作负载,却也增加了解码器和攻击面。格式过于灵活时,构造异常输入的空间更大,安全团队应关注内存上限、递归结构、解码时间和第三方库的更新节奏。新格式进入浏览器并不自动代表所有实现都成熟。
压缩率之外的选择标准
渐进显示值得单独测试。用户等待图片时,先看到低质量轮廓往往比长时间空白更好,但前提是浏览器和 CDN 的传输方式确实支持。不要只在桌面高速网络上看最终画面,应在受限带宽、不同设备和真实页面并发加载下记录可见时间。首屏大图、内容流缩略图和后台下载原图的最优格式可能不同。
迁移可以分三步。先保留当前稳定格式作为回退。再为一小组代表性素材生成候选格式,测量大小、编码耗时、客户端解码与视觉缺陷。最后通过内容协商或 picture 元素分阶段投放,并监控加载失败、转码命中率和核心页面指标。发现问题时能立即退回旧路径,比一次性全量转换更重要。
迁移步骤与风险控制
团队还应避免把编码格式与编码器混为一谈。同一格式的不同编码器、参数和版本可能产生明显不同的速度与质量。基准报告必须写清工具版本、命令、原图集、设备和评价方式。没有这些信息的“格式更快”只能当作待验证观点。
对内容管理系统而言,最实用的决策往往是按资源类型分类。照片优先比较现代有损编码。需要像素级保真的图像评估无损模式和缓存成本。带文字的界面图先检查矢量化或重新设计是否可行。关键在于让格式服务素材,而不是让素材迁就格式。
FAQ
新格式是否一定替代旧格式。不会。兼容性、工具链和内容类型都会决定共存时间。
只看文件体积够吗。不够。至少同时看可见时间、解码耗时、失败率和视觉质量。