图片优化经常失败，因为团队把它当作最后的清理任务。有人发现页面加载缓慢，就压缩几张可见图片，然后就结束了。新的截图和产品图随后不断加入，却没有统一的限制，于是页面又变得沉重起来。

更持久的做法是制定「图片预算」：一组针对文件大小、尺寸、格式和视觉可接受度的可量化规则。预算把压缩从偶尔的救援操作，转变为可重复的发布决策。它也让撰稿人、设计师和开发者对「已就绪」有共同的定义。

本文将说明如何为文档、落地页、发布说明及其他需要图片既保持实用又能高效加载的内容建立这样的工作流。

从每张图片必须完成的任务开始

不要一开始就设定一个通用的尺寸限制。首先根据用途对图片进行分类。一张首图照片、一张产品截图、一个小 logo 和一张示意图在丢失价值时的表现各不相同。

W3C 图片决策树 把图片分为信息型、装饰型、功能型和含文字型，因为它们的角色会影响呈现方式。发布前进行同样的分类也很有用。一张信息图表必须保留标签；功能图标必须保持可识别；装饰背景通常可以承受更激进的压缩，因为它不承载核心含义。

在设定限制前先创建简短清单：

  • 首图和营销图支持视觉识别和第一印象。
  • 界面截图解释操作流程或证明功能存在。
  • 示意图传达难以用文字表达的关系。
  • 缩略图帮助用户浏览集合，但通常不会被仔细查看。
  • logo 和图标依赖清晰边缘、透明度和一致的尺寸。

这份清单可以避免一个常见错误：对所有文件使用相同的质量设置。目标不是完全一致的压缩，而是让每张图片在可预测的传输预算内保持一致的实用性。

先在页面层面定义预算

单张图片可能看起来很小，但整页仍然昂贵。10 张各 300 KB 的图片，在计算脚本、样式、字体或视频之前，就已产生约 3 MB 的图片传输。先从整页体验入手，再把配额分配给各资源。

对于一篇文档文章，你可以决定所有初始可见图片的总和必须低于某个值，而页面下方靠后的截图可以延迟加载。对于落地页，首屏最大的视觉元素应接受最严格的审核，因为它可能延迟页面「看起来已完成」的时刻。

用简明语言写出限制。实用的初始版本可能如下：

  1. 每张图片必须有明确的角色和预期显示宽度。
  2. 导出的文件像素不得明显多于其最大显示尺寸所需。
  3. 初始可见图片集合必须在页面约定的传输配额内。
  4. 重要文字、控件和图表标签在正常尺寸下仍可辨识。
  5. 原始源文件必须保留，以便将来重新导出。

具体数字会因站点、受众和网络条件而异。重要的是规则可以在发布前检查，而不是在性能问题出现后再讨论。

根据交付上下文匹配尺寸和格式

像素尺寸和编码文件大小相关但独立。一张 2800 像素宽的截图若在 900 像素内容栏中显示，往往携带读者永远看不到的细节。在调整质量设置前，先创建合适尺寸的衍生图可以去除这些多余数据。

格式随后决定哪些信息可以高效表示。MDN Web 图片格式指南 记录了压缩、动画、透明度和浏览器支持的差异。应把这些特性作为约束，而不是把最新格式当作自动优胜者。

PNG 仍适用于无损图形、透明度和锐利合成内容；JPEG 得到广泛支持，对照片通常有效，但硬边缘可能出现可见伪影；WebP 可提供有损或无损输出，适合许多混合内容图片。正确选择取决于资源和必须接受它的系统。

每次导出前回答四个问题：

  • 该资源实际显示的最大宽度是多少？
  • 是否需要透明度或精确像素保留？
  • 视觉内容主要是照片纹理、平面图形还是混合？
  • CMS、邮件客户端、市场或合作伙伴站点是否会拒绝所选格式？

这些问题的答案能在花费时间调整压缩前缩小选项范围。

使用受控的本地压缩流程

预算和格式确定后，从保留的原始文件开始工作。不要反复编辑已压缩的衍生图，因为每次有损导出都会丢弃更多信息，使后续对比不可靠。

打开 Lizely 图片压缩工具（支持 JPG、PNG、WebP） 并处理工作副本。该工具在浏览器中运行，当图片包含未发布的界面、内部仪表盘、已脱敏的客户数据或其他不应上传到未知转换服务的材料时非常有用。

采用小步流程：

  1. 记录原始尺寸和文件大小。
  2. 按布局要求的尺寸导出。
  3. 选择目标支持的格式。
  4. 从保守的质量设置开始。
  5. 在预期显示尺寸下对比结果与原图。
  6. 以全分辨率检查一个关键区域。
  7. 逐步降低质量，直到文件进入预算。
  8. 达到预算即停止；不要追求最小值。

最后一步很重要。超出需求后的额外压缩会带来视觉风险，却无法改善验收结果。一张 145 KB 清晰的图片，优于一张 90 KB 但标签已损坏的图片（当约定上限为 160 KB 时）。

按角色进行针对性检查

视觉验收应反映之前确定的用途。泛泛的「看起来还行」审查难以重复且容易仓促完成。

对于截图，确认控件、菜单标签、状态消息和光标目标仍可理解；对于示意图，检查箭头、图例、颜色区分和小注释；对于照片，查看块状图案、渐变色带和主体周围不自然的细节丢失；对于 logo 和图标，在最小显示尺寸下检查透明度、边缘形状和对比度。

审核者还应确认操作事实：

  • 保存的文件可在标准浏览器中打开。
  • 扩展名与其实际编码格式一致。
  • 尺寸与预期的响应式槽位匹配。
  • 测量大小在分配的资源预算内。
  • 页面不会同时下载过时的原始文件和优化版本。
  • 替代文本或附近的解释性文字仍能描述图片用途。

如果发布平台会生成自己的衍生图，应检查实际交付的页面，而非仅检查本地导出。CMS 可能对已接受的文件再次缩放或重新压缩，这第二次转换会改变结果。

把预算纳入发布流程

预算只有在有人负责时才有效。将图片检查加入链接、标题、元数据和移动布局的同一清单。原始文件与网页就绪的衍生图分开存储，并使用能识别资源的命名方式，避免在文件名中嵌入会让未来编辑困惑的临时质量值。

对于频繁更新的站点，可在内容模板中记录显示宽度和最大尺寸，减少下次贡献者的猜测。有构建流水线的团队也可以在审查阶段报告超大资源，但自动化尺寸检查应作为视觉检查的补充，而非替代。软件能测量字节和尺寸，却无法可靠判断一条极小的错误消息在真实上下文中是否仍可读。

在测量真实页面后重新审视限制。如果贡献者尽管导出谨慎仍不断超出目标，可能是预算不现实，或设计请求了过多视觉元素。如果所有文件都轻松通过，限制可能过于宽松，无法影响行为。把初始数字视为可测试的运行规则，而非永久法则。

简洁的发布前检查清单

在批准含大量图片的页面前，核实以下事项：

  • 每张图片都有明确角色。
  • 显示尺寸已知。
  • 源原始文件已保留。
  • 格式与视觉内容和目标支持匹配。
  • 单个文件及整页均在约定预算内。
  • 关键视觉信息通过正常尺寸审查。
  • 最终发布的衍生图已在浏览器中检查。

这个流程让优化变得可预测。更重要的是，它把性能与意义联系起来：一张成功的图片既轻盈到能高效交付，又清晰到能完成其被添加的任务。

常见问题

每页都应该使用相同的图片预算吗？

不需要。产品画廊和文本密集的指南用途不同。使用共享原则，但为每页设置能反映所提供体验的限制。

调整尺寸比改变质量更重要吗？

两者都重要。正确的尺寸可去除布局不需要的像素，而压缩控制剩余图像数据的编码方式。先决定尺寸，再调整格式和质量。

自动化检查可以取代视觉审查吗？

不能。自动化可以拒绝超出字节或尺寸限制的文件，但仍需人工确认标签、控件、示意图和照片细节是否仍有用。

什么时候应该删除原始文件？

保留它作为回滚和重新导出的来源。未来的布局、格式或无障碍需求可能需要新的衍生图，而这些无法从已压缩的文件中恢复。

披露：本文在 AI 协助下起草。其事实性主张已在引用来源和在线工具页面发布前核实。