图片优化从“显示多大”开始

把超大原图直接缩到一个小卡片中，会消耗不必要的流量；尺寸属性缺失还可能在加载后推动布局变化。正确准备展示尺寸，往往比只调压缩质量更有效。

原图尺寸、编码质量和页面实际显示大小共同影响加载成本。

实际怎么检查

以下思路适用于静态站点；路径、构建工具与发布时间规则需按站点实际配置调整。

宽高属性 + 合理缩略图 + 延迟加载

在手机视口检查清晰度、布局跳动与下载体积。

遇到异常再检查什么

在手机与桌面视口分别检查清晰度和布局。画廊原图可以按需要加载，但首屏主视觉应单独评估优先级，不要机械地给所有图片加懒加载。

图片宽高比例应与实际资源一致。错误比例会让占位空间与图片加载后的尺寸不同，仍然产生布局跳动。准备多个尺寸时，也要确保浏览器能根据视口选择合理资源。

首屏关键图片不宜一概延迟加载，需结合实际渲染位置判断。

参考：建站实践 文档。