上线前把这份清单走一遍;每一项都是经常带着问题上线的东西。
品牌素材
- 网站图标齐备,包含 ICO 和 SVG,外加 180 像素的 apple-touch-icon。确认它在浏览器标签、书签和手机主屏上都能正常显示。
- 如果站点可安装,还要有应用图标和 manifest 图标(192 和 512 像素)。
- Logo 变体:浅色和深色背景版、横版和竖版组合,并留有足够的安全边距。
- 尽可能让 Logo 是矢量的(SVG)。
社交分享
- Open Graph 图片 1200 × 630,使用绝对 URL,小于 8 MB。
- 带图片的 Twitter 卡片标签。
- 在有价值的地方为各页面单独配图——文章和商品不该全部共用站点默认图。
- 在各平台的预览/调试工具里测试实际渲染效果。社交平台的抓取会激进缓存,所以要在宣布之前验证,而不是之后。
- 确认 OG 图片没有被页面级的元数据对象意外覆盖——这是非常常见的 bug。
性能
- 首屏主图没有被懒加载,且已提升优先级。
- 没有图片以远超其显示尺寸的规格被发送。 检查最大的那几张,比较原始尺寸与渲染尺寸。
- 现代格式(WebP/AVIF)并带回退。
- 每张图都声明了宽高,加载过程中不会跳动。
- 关键页面的图片总重量在预算之内——落地页目标是 1 MB 以内。
- 响应式尺寸确实生效:检查手机实际下载了什么,而不只是看桌面端。
内容与无障碍
- 每张有意义的图片都有 alt 文本,装饰性图片写空 alt。
- 没有任何关键信息只存在于图片里——价格、截止日期、联系方式。
- 图上文字的对比度已检查,包括移动端裁切后的情况。
- 深色模式已检查:深色图形的透明 PNG、白底 logo、烧进了白边的图片。
- 描述性文件名,而不是 IMG_1234.jpg。
法务与收尾
- 每张第三方图片的授权已记录,ID 和日期保存在可长期查阅的地方。
- 仅限编辑用途的图片没有被商用。
- 营销图像中可识别的人物已备有肖像与财产授权书。
- 占位图和示意图已移除——经典的上线尴尬是页脚留着一张行业不对的图库照片,或一个"敬请期待"的占位符。
- 截图中的测试和演示数据已清除。
- 任何截图中的个人或内部信息已遮蔽。
上线之后
有些事只能在线上检查:
- 在聊天软件和社交平台分享一个网址,看看弹出的预览是什么样。
- 用真机在移动网络下打开网站,而不是 WiFi。
- 对线上站点跑一次 Lighthouse,而不只是在本地跑。
- 在真机上检查深色模式。
- 一周后查看搜索结果,确认网站图标和图片收录符合预期。
保留这份清单
把它存成模板,每次重大发布都重跑一遍。图片方面的退化是无声的——不报错、不会让任何测试失败,页面只是看起来略差一点、加载略慢一点,直到几个月后才有人注意到。