压缩一张图片很简单，把一整组图片处理好则需要统一规则：相同的最大尺寸、合适的输出格式、稳定的画质，以及能和原文件对应上的命名方式。

批量处理适合商品目录、博客配图、作品集、房源照片，以及任何需要同时加载多张图片的页面。目标不是一味追求最小文件，而是在不影响用途的前提下去掉浪费。

添加文件前先确定输出规则

先决定三件事：

  1. 最大尺寸。 以网站实际显示的最大尺寸为准。缩略图和通栏大图不应该使用同一组尺寸。
  2. 格式。 WebP 适合作为网页照片和混合图形的默认选择；需要无损细节或透明背景时可以保留 PNG；简单 Logo 和图标则可以考虑 SVG。
  3. 画质。 从中高画质开始，再检查一张细节丰富的样图。头发、树叶、渐变和小号界面文字最容易暴露压缩痕迹。

对视觉类型相似的一组图片使用同一套规则，结果会比每张图随意调整更稳定。

一套可以重复使用的批量流程

  1. 按用途分组：缩略图、正文图片、头图和透明图形。
  2. 打开图片压缩，每次添加一组。
  3. 为这一组统一设置目标格式、画质和尺寸。
  4. 优先预览最难处理的图片，而不是只看最简单的一张。
  5. 批量处理并比较输出体积。
  6. 替换网站原图前，按实际显示尺寸打开几张结果检查。

原文件一定要保留。网站优化图只是发布副本，不应成为新的母版。如果以后设计尺寸发生变化，应该从原图重新导出，而不是把已经压缩过的图片放大。

不同类型的图片不要盲目混在一批

同一个设置通常无法适合全部素材：

  • 普通照片通常可以承受较明显的有损压缩。
  • 带小字的截图需要更高画质，有时还要保留原尺寸。
  • 透明图形必须选择支持透明通道的输出格式。
  • 平面 Logo与其继续压缩像素，不如转换成矢量图。

把它们拆成不同批次只多花一分钟，却能避免适合照片的设置破坏文字和锐利边缘。

不确定格式时，可以查看 WebP、AVIF 与 JPEG 对比；Logo 和线稿则可以参考位图转矢量图指南。

在真实使用尺寸下检查画质

放大到 400% 很适合寻找压缩瑕疵，但不能作为最终标准。应该把优化后的图片放在页面实际尺寸下查看。极端放大时的一点差异，访客可能完全看不到；反过来，正常尺寸下模糊的商品标签就不能接受。

重点检查：

  • 小字和价格标签；
  • 容易出现色阶断层的渐变与天空；
  • 人脸、头发和织物纹理；
  • 图形中颜色交界的硬边缘；
  • 透明边缘在深色和浅色背景上的表现。

整理输出文件

使用可预测的命名方式，例如 product-name-800.webp，审核完成前把优化结果放在单独文件夹。文件名带上尺寸，之后维护缩略图和大图会轻松很多。

浏览器本地压缩不需要上传原图，因此也适合未发布商品、客户素材和包含隐私信息的截图。

准备好图片后，把同一类素材添加到图片压缩，套用统一规则，确认效果后再发布。