先调整尺寸，再降低质量

一张在页面中只显示 800 像素宽的图片，通常不需要直接加载 4000 像素的源文件。缩小尺寸可以干净地移除多余数据，节省的体积经常比大幅降低质量更多。原始大图应在网站之外保留，用于未来改版或印刷。

对于重要图片，可将导出宽度控制在 CSS 显示宽度的约两倍，以适配高像素密度屏幕。再使用响应式图片，让窄屏设备选择较小版本，而不是让所有访客下载最大文件。

根据画面选择质量

普通 WebP 或 JPG 照片可以从质量 80 左右开始，与原图对比后逐步降低。当色块或边缘杂点开始明显时，再回退一个档位。截图、字体和插画可能需要更高质量，或者直接使用无损格式。

不同编码器的质量数值并不统一，一个工具中的 80 不一定等于另一个工具中的 80。最终预览和下载后的实际体积，比滑杆上的数字更重要。

  • 检查天空和肤色是否出现色带
  • 检查头发、树叶和织物细节是否变糊
  • 检查文字和标志边缘是否出现光晕
  • 下载结果文件并在目标页面中再次查看

按整个页面控制体积

图片应放在完整页面中评估。一张 300 KB 的首屏主图可能合理，但二十张 300 KB 的缩略图会明显拖慢页面。优先优化首屏图片，页面下方的媒体可以延迟加载。

应使用真实手机和较慢网络复查。目标是让页面快速可读、操作及时，而不是不顾画质追求最小文件。