图片加载、占位与体验优化

图片是很多页面里最重的资源，也是最容易影响布局和首屏体验的资源。只把图片压小并不够，还要考虑展示尺寸、加载时机、占位方式和失败后的处理。图片策略做不好，页面会慢、会跳、会空，也会影响用户对内容质量的判断。

一、先控制展示尺寸和资源尺寸

最常见的浪费是用超大原图显示一个小缩略图。前端应该根据展示位置准备合适尺寸的资源，至少不要让几 MB 的图片进入首屏。现代格式如 WebP 可以明显降低体积，但也要结合兼容性和构建流程考虑。

二、占位是布局稳定的一部分

图片加载前应该保留空间，避免加载完成后把下面内容挤走。可以用固定宽高、aspect-ratio 或骨架占位实现。占位颜色也要接近页面背景，不要产生强烈闪烁。首屏关键图可以优先加载，非首屏图片则适合懒加载。

三、失败状态不能忽略

图片链接失效、网络失败、权限限制都可能发生。失败时如果只留下一个破图标，会让页面显得很粗糙。更好的方式是展示默认图、占位块或清晰的替代文本。对于内容型页面，图片的 alt 文本也应该能说明图片意义。

• 按展示区域准备合适尺寸，不用原图硬缩。
• 首屏关键图片优先加载，非首屏图片懒加载。
• 所有图片区域都要预留稳定尺寸。
• 失败状态和替代文本要提前设计。

图片优化的最终目标不是跑分，而是让用户尽快看到有意义、稳定、不会打断阅读的内容。