媒体资产治理：图片与视频的命名、压缩与复用
一、先给文件名定规矩，这是治理成本最低的一层
媒体库失控不是一天发生的。它从第一个 IMG_2043.jpg 开始，等到某天要替换产品图、或者客户问某张照片的授权来源时，才发现没人说得清。
四种失控表现，代价不一样：
| 失控表现 | 典型样子 | 代价 |
|---|---|---|
| 文件名无语义 | 一堆日期加序号 | 搜索不到，替换时靠肉眼翻 |
| 版本混乱 | 同名文件有 3 个版本 | 上线的是错的那一版 |
| 未引用文件堆积 | 上传了但从未使用 | 占空间，备份变慢，迁移变重 |
| 授权来源不清 | 不知道图从哪来 | 客户或平台投诉时无法举证 |
命名规范只需要四个字段，按顺序拼，用短横线连接：品类、型号、场景、版本。
| 字段 | 写法 | 示例 | 说明 |
|---|---|---|---|
| 品类 | 英文小写单词 | cnc-machine | 与产品分类一致，不要自创词 |
| 型号 | 原样保留，统一大写或小写 | gx-620 | 与产品页型号完全一致 |
| 场景 | 3 到 5 个英文小写词 | workshop-install-02 | 描述内容而不是美工感受 |
| 版本 | 两位数字 | v02 | 只在实质修改时递增 |
对照看更清楚，同一张图两种命名方式的差别：
| 命名方式 | 文件名 | 可检索性 | 迁移安全性 |
|---|---|---|---|
| 相机原始名 | IMG_2043.jpg | 无法通过文件名判断内容 | 改名即断链，风险高 |
| 规范命名 | cnc-machine-gx620-workshop-install-v02.webp | 可通过文件名定位 | 有版本号，替换不冲突 |
命名规范有一条容易被忽略的配套要求：文件名一旦上线就不要改。改文件名等于改 URL，旧地址会失效。需要替换内容时，用递增版本号生成新文件，然后更新页面引用，同时为旧文件名保留一条转发规则。环形山在 /site/ 的交付清单里，把媒体命名规范列为上线前必须确认的一项，就是因为这一层改动成本最低，但事后补救最麻烦。
二、体积与格式：先定基线，再谈压缩
“图片太大”这句话没有可执行性，要落到具体数字。下面这张基线表可以直接抄进规范文件，按展示宽度定目标体积。
| 图片用途 | 展示宽度 | 目标体积 | 推荐格式 |
|---|---|---|---|
| 首屏主图 | 1,600 到 1,920 像素 | 150 到 300 KB | WebP 或 AVIF |
| 正文插图 | 800 到 1,200 像素 | 60 到 150 KB | WebP |
| 产品图缩略 | 400 到 600 像素 | 20 到 60 KB | WebP |
| 图标与线条图 | 任意，按需缩放 | 5 到 20 KB | SVG |
| 带透明通道的图 | 800 像素以内 | 40 到 120 KB | WebP 或 PNG |
格式选择不要一刀切，五种常见格式各有适用范围：
| 格式 | 压缩率 | 透明通道 | 适用场景 | 不建议用的地方 |
|---|---|---|---|---|
| JPEG | 中 | 不支持 | 需要最大兼容性的照片 | 线条图、截图 |
| WebP | 高 | 支持 | 照片与产品图的主力格式 | 需要极致压缩的首屏大图 |
| AVIF | 最高 | 支持 | 首屏大图、质量要求高的照片 | 需要兼容旧版浏览器的场景 |
| PNG | 低 | 支持 | 需要无损的截图与线条图 | 照片，体积会翻数倍 |
| SVG | 最高 | 自带 | 图标、流程图、简单线稿 | 复杂照片 |
响应式图片是另一个必做项。同一张图给手机和桌面浏览器送不同尺寸，可以省掉一半以上流量：
| 断点 | 视口宽度 | 建议下发宽度 | 说明 |
|---|---|---|---|
| 手机 | 小于 768 像素 | 640 像素 | 不下发桌面尺寸 |
| 平板 | 768 到 1,024 像素 | 1,024 像素 | 兼顾横竖屏 |
| 桌面 | 1,024 到 1,600 像素 | 1,600 像素 | 多数页面的主档 |
| 大屏 | 大于 1,600 像素 | 1,920 像素 | 只给首屏主图配这一档 |
视频要单独说。不要把视频文件直接放在主图位置，也不要自托管首屏背景视频：
| 视频用途 | 建议存放位置 | 理由 |
|---|---|---|
| 产品演示、安装教程 | 第三方视频平台，页面嵌入 | 节省带宽，自带播放器与字幕能力 |
| 展会花絮、企业形象 | 第三方视频平台，页面嵌入 | 有外链与推荐流量 |
| 首屏背景动效 | 用静态图加轻量动画替代 | 视频会显著拖慢首屏渲染 |
| 短于 10 秒的操作示意 | 转为动图或序列帧 | 体积通常小于视频 |
这一层什么时候不适用： 如果站点主要面向的网络环境带宽充足、且访客以桌面端为主（比如工业装备的采购人员多在办公室查看），把首屏主图压到 150 KB 以下反而会损失清晰度，影响参数铭牌的可读性。这种情况下可以放宽到 300 到 400 KB，并且优先保证文字与刻度清晰。判断依据是：访客需要看清图上的细节文字时，清晰度优先于体积。
三、元数据：alt 写事实，title 与说明文字各司其职
图片元数据里最常被写坏的是 alt。它有两个作用：图片加载失败时替代显示，以及给读屏软件与搜索引擎提供内容描述。写法的核心原则是描述事实，不是堆关键词。
| 写法 | 示例 | 判断 |
|---|---|---|
| 堆关键词 | cnc machine cnc machining china cnc factory | 会被判为堆砌，无描述作用 |
| 空着不写 | 无 | 等于放弃一处信息位 |
| 描述事实 | 数控加工中心在车间内进行主轴装配 | 正确，可独立成立 |
| 含型号与场景 | GX-620 数控加工中心装配线，车间现场 | 正确，信息量更高 |
三个属性各有分工，不要混用：alt 描述图里有什么，title 只在鼠标悬停时出现、对搜索几乎无影响，图注则用来补充图片与正文的关系。
| 属性 | 显示位置 | 对搜索的作用 | 建议长度 |
|---|---|---|---|
| alt | 图片加载失败时、读屏软件 | 有，作为图片内容信号 | 15 到 40 字 |
| title | 鼠标悬停提示 | 极小，不必为此费心 | 可省略 |
| 图注 | 图片下方常显 | 有，作为正文的一部分 | 20 到 60 字 |
EXIF 信息要清理，它不是格式问题，而是合规问题：
| EXIF 项 | 风险 | 处理 |
|---|---|---|
| GPS 坐标 | 泄露工厂与车间精确位置 | 上传前一律抹除 |
| 拍摄设备与序列号 | 可关联到具体设备与个人 | 建议抹除 |
| 拍摄时间 | 通常无害 | 可保留 |
| 版权与作者字段 | 可作为授权凭证 | 建议保留公司信息 |
清理动作没有技术门槛，多数图片处理工具都有批量去除元数据的选项，代价是每次上传前多花几秒。但一旦某张带 GPS 的现场照片被公开，泄露的就是工厂的位置信息，这属于不可逆的损失。
四、懒加载有边界，首屏的那张图不能懒加载
懒加载能省流量，但用错位置会直接拖慢首屏。判断标准很明确：首屏可见区域的图片不要懒加载，尤其是决定首屏渲染指标的那一张主图。
| 元素位置 | 是否懒加载 | 原因 |
|---|---|---|
| 首屏主图 | 否，并设置为高优先级 | 它是首屏渲染指标的计算对象 |
| 首屏内的产品缩略图 | 否 | 与主图同时进入视口 |
| 第二屏及以后的照片 | 是 | 不在初始视口内 |
| 页脚与侧栏小图 | 是 | 通常需要滚动才可见 |
| 视频嵌入 | 是，用占位图代替 | 直接嵌入会加载大量脚本 |
还有一个容易忽略的点：图片必须写死宽高。不写宽高，浏览器在图片加载完成前无法确定占位空间，页面会在加载过程中反复跳动，用户读到一半段落突然下移，这在移动端尤其明显。表现上可以观察页面布局偏移指标，控制得好的站点这个值通常在 0.1 以内。
五、版权与授权：四种素材来源，四套要求
媒体资产最容易出事的地方不是技术，是授权。四种来源要求完全不同：
| 素材来源 | 需要的凭证 | 常见风险 |
|---|---|---|
| 图库下载 | 授权范围说明与下载记录 | 超出授权范围使用，如用于转售物料 |
| 客户现场拍摄 | 客户书面授权，注明用途与期限 | 未授权使用客户产线，客户投诉 |
| 供应商提供的产品图 | 供应商书面同意使用 | 供应商同时供货给竞品，图片重复出现 |
| AI 生成图片 | 记录生成工具与生成时间 | 生成内容与他人作品高度相似 |
客户现场照是最容易忽略的一类。授权书不需要复杂，写清三件事就够：使用范围（官网、社媒、印刷物料）、使用期限、可否出现产线与设备铭牌。同时要注意画面里可能出现的第三方内容：
| 画面元素 | 风险 | 处理 |
|---|---|---|
| 可识别的品牌标识 | 可能构成商标使用争议 | 拍摄时避开或后期处理 |
| 可识别的员工面部 | 涉及个人肖像 | 取得本人同意或虚化处理 |
| 客户产线的工艺细节 | 可能涉及客户商业信息 | 发布前请客户确认 |
| 竞品设备铭牌 | 容易被误读为合作关系 | 一律避免入镜 |
AI 生成图片的使用边界也要写进规范。稳妥的做法是：可以用在概念示意、场景配图、抽象图形上；不要用在需要证明真实性的位置，比如工厂实拍、检测报告、认证证书、产品实物图。前者的风险是”看起来像假的”，后者的风险是”被质疑造假”，两者性质不同。
六、复用矩阵与治理节奏
一次拍摄的产出，应该覆盖五个渠道，而不是只发一次官网就丢进媒体库。提前定好裁切尺寸，能省掉每次临时改图的时间。
| 渠道 | 常用尺寸 | 裁切比例 | 备注 |
|---|---|---|---|
| 官网首屏 | 1,600 到 1,920 像素宽 | 16 比 9 或 21 比 9 | 主体放中间偏左 |
| 官网正文插图 | 800 到 1,200 像素宽 | 4 比 3 或 16 比 9 | 留出图注位置 |
| 邮件通讯 | 600 像素宽 | 3 比 2 | 考虑纯白背景 |
| 社媒帖子 | 1,200 像素宽 | 1 比 1 与 4 比 5 各一套 | 竖版单独构图 |
| 展会与报价单 | 300 分辨率印刷用 | 按版面 | 需要原始文件另存 |
治理节奏按季度走，每次两小时，三件事：
| 周期 | 动作 | 判定标准 |
|---|---|---|
| 每季度 | 未引用文件清单核对 | 连续两个季度未被引用的文件列入清理候选 |
| 每季度 | 命名规范巡检 | 抽查 50 个新上传文件，命名合规率不低于 90% |
| 每季度 | 大文件排查 | 单文件超过 500 KB 的图片逐张确认是否必要 |
| 每半年 | 授权凭证复核 | 客户现场照与图库图逐张确认凭证仍在 |
| 每年 | 归档与迁移演练 | 媒体库可完整导出并在测试环境恢复 |
清理规则要写死，避免”觉得没用就删”：
| 文件状态 | 判定条件 | 处理方式 |
|---|---|---|
| 在用 | 当前被至少一个页面引用 | 保留，纳入版本管理 |
| 待观察 | 连续两个季度未被引用，但有授权凭证 | 移入归档目录，不删除 |
| 可清理 | 未被引用，且无授权凭证或来源不明 | 确认无外链后删除 |
| 必须保留 | 出现在印刷物料、报价单、展会展板上 | 即使站点未引用也保留原始文件 |
最后一行经常被忽略。现场照在官网撤下来了，但还印在样本册和展板上，明年可能还要用，删掉就得重新拍。清理判定不能只看”官网有没有引用”，还要看”站外还有没有在用”。
需要提醒的是，如果站点的媒体库规模在 200 个文件以内、且每月新增不超过 20 个，上面这套流程可以简化：只做命名规范和大文件排查两件事，季度巡检改成半年一次即可。治理强度应该和资产规模匹配，不要为了流程而流程。图片与页面性能的关系，可以对照 /insight/ 里性能相关的整理一起看。
FAQ 常见问题
写在最后
媒体资产治理看起来是一件琐事，但它同时牵动三件正经事：页面性能、搜索可读性、法务合规。一个命名规范能同时改善这三件事，投入成本却只有一次规范制定加日常遵守。
多数站点的媒体库问题不是不能治，而是从来没被当成一件需要治理的事。等到换站、迁移，或者客户来问授权来源时，才发现代价远大于当初做规范的时间。
一句话记法：文件名决定找不找得到，体积决定快不快，授权凭证决定用不用得起——三件事都要在第一次上传时就做对。