图片通常是首屏最大的负担。看着是小事，踩一次坑往往要花掉半天，提前把判断依据弄清楚最省时间。

下面按“先判断范围、再处理、最后防复发”的顺序展开，涉及 图片优化、WebP 的关键动作都给了具体做法，可以照着走。

格式

优先 WebP，兼容性差时降级 JPG。

同一时间只改一项，改完立刻验证，出问题也好定位。

尺寸

按展示尺寸输出，不要放大图。

容易踩的坑：另一个坑是照抄别人的参数，环境不同，参数就该重新算。

懒加载

首屏外图片延迟加载。

出现异常先回退到上一个已知可用状态，再慢慢找原因。

分发

图片走 CDN，别占主站带宽。

速查表

常见问题

Q：图片优化这类问题，最快的判断办法是什么？
先确认现象的范围：只有单台还是全部、只在某个时段还是持续。范围一缩小，原因基本就浮出来了。

Q：按文中的步骤做完，还需要注意什么？
把处理过程和最终生效的参数记下来。同类问题再出现时直接对照记录，比重查一遍快得多。

小结

回到这篇的四个环节：格式、尺寸、懒加载、分发。把这几步走完，绝大多数同类问题都能自己解决；确实卡住的，把日志时间点和报错原文一起提交工单会快很多。

相关阅读：网站打开慢怎么优化、500 错误怎么定位、404 页面怎么自定义。