好图像，也需要好的加载体验

官网图片性能优化不应只在上线前统一压缩文件。照片承担什么信息、手机如何裁切、首屏是否需要视频、哪些细节必须保留，都影响设计和加载。网站视觉与性能平衡可以从内容决策开始，让有价值的图像得到合适的尺寸与交付方式。

先决定首屏图像要表达什么

网站首屏图片设计应有一个明确主题：产品材质、使用环境或品牌叙事中的关键场景。若一张静态照片已能表达主题，就需要具体说明视频增加了什么价值。为桌面与手机分别检查焦点位置，避免文字覆盖产品细节，或裁切后失去画面原有含义。

素材准备时保留高质量原文件，同时提供用途、裁切建议和授权信息。不要通过把小图放大来假装高清，也不要把应作为正文的标题、参数和按钮全部烘焙进图片，否则阅读、更新和不同屏幕适配都会更困难。

把不同屏幕需要的图片交付清楚

响应式图片交付应与前端约定显示宽度、像素密度、文件格式和备用方案。HTML 的 srcset 与 sizes 可以帮助浏览器选择适合的资源，picture 可用于需要不同裁切或格式选择的情况。具体策略应由实施方结合图像内容、浏览器范围和测试结果确定。

• 产品图保留关键结构、纹理和真实颜色，压缩后人工检查细节。
• 首屏关键图像与页面下方图像区别处理，避免无差别延迟加载。
• 为图像预留尺寸或比例，减少加载后内容位置突然变化。
• 对装饰图与信息图分别处理替代文本，不让重要信息只存在于图片里。

把体验指标放回真实使用环境

品牌网站加载速度不能只看本机的一次测试。web.dev 对 Core Web Vitals 的良好阈值给出 LCP 不超过 2.5 秒、INP 不超过 200 毫秒、CLS 不超过 0.1，并以真实访问数据的第 75 百分位进行判断。它们分别帮助观察主要内容显示、交互响应和布局稳定性，不能用单次实验室分数代替全部结论。

新站可能暂时没有足够真实访问数据，可以先用约定设备和网络条件进行实验室测试，再在上线后补充观察。记录测量页面、时间、网络和方法，才能比较优化前后；不要把一个页面的结果扩大成全站承诺。

为编辑留下持续可用的规则

交付时提供常用图片比例、推荐输出方式和检查清单。编辑更新首图、案例图或视频之后，重新确认裁切、清晰度和加载情况。高质量体验来自设计、开发与日常内容维护共同执行，而不是只依赖一次压缩或一个插件。

参考：web.dev：Web Vitals。

参考：MDN：响应式图片。