上线前把这份清单走一遍;每一项都是经常带着问题上线的东西。

品牌素材

  • 网站图标齐备,包含 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,而不只是在本地跑。
  • 在真机上检查深色模式
  • 一周后查看搜索结果,确认网站图标和图片收录符合预期。

保留这份清单

把它存成模板,每次重大发布都重跑一遍。图片方面的退化是无声的——不报错、不会让任何测试失败,页面只是看起来略差一点、加载略慢一点,直到几个月后才有人注意到。