media-asset-management

媒体资源管理

设计图像、视频和可下载文件的存储、处理、整理与交付方式。与技术栈无关。无论使用自定义管道还是托管服务，这些原则都适用。

---

适用场景

• 设计或重新设计图像和媒体管道
• 选择媒体 CDN 或图像服务
• 设置自适应图像交付
• 规划数字资产管理（DAM）系统
• 审查媒体性能问题
• 选择视频托管和嵌入策略
• 为设计师和撰稿人设置资源上传工作流
• 将媒体从一个平台迁移到另一个平台

不适用场景

• 媒体之外的性能优化（使用 performance-optimization）
• 品牌形象或摄影指导（使用 brand-identity、art-direction）
• 内容制作策略（使用 content-strategy）
• 单张图像优化（已包含在 performance-optimization 中）

---

必需输入

• 当前媒体清单：资源存放位置及格式
• 数量：资源数量、存储空间和流量
• 来源：由谁创建和上传媒体（设计师、撰稿人、自动化工具）
• 平台：媒体的使用场景（网页、电子邮件、应用、合作伙伴）
• 性能基线：当前图像大小和加载时间
• 预算情况：托管服务会产生月度费用

---

框架：4 个阶段

媒体管道分为 4 个阶段，每个阶段都有自己的决策。

阶段 1：源文件

资源进入系统的位置。

来源：

• 设计师（Figma 导出文件、Photoshop、Illustrator）
• 摄影师（相机拍摄的 RAW 或 JPEG 文件）
• 库存照片库
• AI 生成的图像
• 用户生成内容（上传内容）
• 自动化系统（例如，截图、生成的缩略图）

在源文件阶段，需决定：

• 接受的文件格式（RAW、TIFF、PSD、AI，还是交付格式）
• 命名约定
• 必需的元数据（替代文本、说明文字、署名、使用权）
• 源文件的最高分辨率（应足以生成任何尺寸，但也不能高到造成浪费）
• 源文件的存放位置（与交付资源分开存放）

反模式： 将源文件和交付资源存放在同一位置。难以找到原始文件，难以重新生成，也难以审查使用情况。

阶段 2：处理

将源文件转换为交付格式。

处理决策：

• 调整为标准尺寸（例如，固定宽度集合：320、640、960、1280、1920、2560）
• 压缩（有损或无损，并设定质量目标）
• 转换格式（栅格图像使用 JPEG、WebP、AVIF；矢量图像使用 SVG）
• 生成缩略图和预览图
• 移除元数据（EXIF、GPS），除非有意保留
• 管理色彩配置（网页使用 sRGB）

处理选项：

• 构建时： 在部署期间处理静态资源。可预测，运行时速度快，但难以灵活调整。
• 按需： 服务在收到请求时生成合适的格式和尺寸。灵活，但需要处理层。
• 混合： 静态处理常用尺寸，并针对特殊情况按需处理。

对于图像变体多且持续变化的网站，按需处理更合适。对于严格管控的营销网站，构建时处理可能更简单。

阶段 3：交付

高效地将资源提供给用户。

交付决策：

• CDN：任何有一定规模的媒体流量都需要 CDN，以实现边缘缓存和全球分发。
• 格式协商：向支持 AVIF 的浏览器提供 AVIF，否则提供 WebP，并以 JPEG 作为回退。使用 <picture> 元素或内容协商。
• 自适应图像：使用 srcset 和 sizes 属性，让浏览器选择适合视口尺寸的图像。
• 延迟加载：为首屏以下的图像设置 loading="lazy"。
• 异步解码：为非关键图像设置 decoding="async"。
• 宽度和高度属性：始终设置，以防止布局偏移。

现代 HTML 模式：

<img 
  src="/image-1280.jpg" 
  srcset="/image-640.jpg 640w, /image-960.jpg 960w, /image-1280.jpg 1280w, /image-1920.jpg 1920w" 
  sizes="(max-width: 768px) 100vw, 50vw"
  width="1280"
  height="720"
  loading="lazy"
  decoding="async"
  alt="Descriptive alt text">

或者使用格式协商：

<picture>
  <source type="image/avif" srcset="/image.avif">
  <source type="image/webp" srcset="/image.webp">
  <img src="/image.jpg" alt="Descriptive alt text" width="1280" height="720">
</picture>

阶段 4：管理

长期保持系统井然有序且实用。

管理决策：

• 资产库或 DAM（数字资产管理）：团队查找资产的集中位置
• 标签和搜索
• 版本控制（设计师更新资产，但旧版本仍在使用）
• 权利和许可跟踪
• 审计和清理（哪些资产已不再使用？）
• 权限（谁可以上传、编辑、删除）

规模较小时，共享文件夹就够用。资产达到几千个以上或涉及多个团队时，就需要真正的 DAM。

---

格式参考

适用于常见的 Web 用途：

格式	适用场景	避免用于
AVIF	照片、复杂图像。压缩效果最佳。	浏览器支持边缘情况（在 2026 年已很少见，如今已普及）
WebP	照片、插画。压缩效果好，支持广泛。	印刷、归档
JPEG	照片（回退格式）。支持通用。	边缘锐利的图形、透明背景
PNG	边缘锐利的图形、透明背景、屏幕截图。无损。	照片（文件体积大）
SVG	Logo、图标、简单插画。可缩放。	照片、复杂艺术作品
GIF	实际上已过时。动画请使用视频格式。	任何现代用途
MP4（H.264）	视频，支持通用。	静态内容
WebM（VP9 / AV1）	视频，压缩效果更好。	较旧的浏览器

对于大多数网站：向现代浏览器提供 AVIF/WebP，并提供 JPEG/PNG 回退格式。矢量图使用 SVG。视频使用 MP4。

---

工作流

步骤 1：盘点

有哪些资产？位于何处？状态如何？

• 图像数量和总存储量
• 各格式的平均大小（KB）
• 图像相关的性能指标
• 存在损坏或缺失图像的页面数量
• 源文件与交付文件

步骤 2：审查性能

抽查部分页面：

• 每页图像体积（目标：营销页面总计低于 500KB）
• 图像请求数量
• 是否使用了响应式图像？
• 是否提供了现代格式？
• 缺少尺寸信息是否导致布局偏移？

工具：Lighthouse、WebPageTest、CDN 的分析数据。

步骤 3：选择处理流程

三种合理的模式：

模式 A：静态，在构建时处理

• 资产存放在代码仓库或存储桶中
• 构建流程生成不同尺寸和格式
• 通过 CDN 提供
• 适用于：静态网站、资产变动少、需要严格控制性能的场景

模式 B：按需处理的图像 CDN

• 将源文件上传到存储桶或服务
• 图像 CDN（Cloudinary、imgix、Cloudflare Images、Bunny 等）通过 URL 参数按需处理图像
• 适用于：中大型网站、资产经常变动、需要多个变体的场景

模式 C：内置图像 API 的无头 CMS

• CMS 保存源资产
• CMS 提供图像 API，用于调整尺寸和转换格式
• 适用于：内容密集型网站、由非技术人员上传内容，或已选用 CMS 的场景

这些模式并非互斥。大型网站通常对设计资产使用模式 A，对内容图像使用模式 B。

步骤 4：制定标准

记录：

• 命名规范
• 必需的元数据（替代文本、署名信息）
• 源文件最大尺寸
• 不同使用场景所需的源文件最小尺寸
• 批准使用的格式
• 文件大小目标

尽可能通过工具强制执行这些标准（例如，在 CI 中检查文件大小，要求 CMS 中必须填写替代文本）。

步骤 5：设置工作流

针对每种来源类型：

来源	工作流
设计师	从 Figma 导出，放入存储桶，自动处理流程完成其余工作
撰稿人	通过 CMS 上传，CMS 提示填写替代文本
摄影师	将 RAW 文件放入源文件存储桶，由设计师或自动化流程创建 Web 版本
用户上传	通过图像服务处理，适用时自动审核

记录每个人的职责。未记录的工作流迟早会出问题。

第 6 步：构建素材库

对于除最小型网站以外的所有网站：

• 集中式 DAM 或共享素材库
• 标签分类体系（主题、风格、品牌、活动等）
• 支持跨标签和元数据搜索
• 记录每项素材的权利信息（图库许可、定制委托、职务作品等）
• 退役工作流（权利到期、素材退役）

第 7 步：监控和审计

• 图片较多页面的性能指标
• 存储成本
• CDN 成本
• 图片损坏警报（被引用的媒体返回 404）
• 清理未使用的素材（存储成本会不断累积）

第 8 步：记录流水线

流水线文档包括：

• source → process → deliver → manage 流程图
• 每个阶段使用的工具
• 标准和命名约定
• 常见情况的工作流
• 出现故障时的升级处理流程

---

失败模式

将源文件放在交付存储桶中。 向用户提供 50MB 的 RAW 文件。修复方法：将源文件与交付文件分开。

所有浏览器都使用同一种图片格式。 仅使用 JPEG，而 AVIF 可以小 30-50%。使用格式协商。

缺少宽度和高度属性。 会导致布局偏移，影响 CLS 指标。务必设置。

对首屏主图进行延迟加载。 首屏以上的图片不应延迟加载。对首屏以下的图片进行延迟加载。

所有图片都急切加载。 页面加载时加载所有图片。对首屏以下的图片使用 loading="lazy"。

没有响应式图片。 移动设备加载桌面版图片。浪费资源且速度慢。使用 srcset 和 sizes。

只有一种源分辨率。 源文件就是交付分辨率。无法生成视网膜屏或更大尺寸的图片。源文件应为最大交付尺寸的 2-3 倍。

删除所有元数据。 会删除替代文本和署名信息。删除 GPS 和个人 EXIF 信息；保留语义元数据。

命名随意。 IMG_4823.jpg、Screenshot 2024-03-15.png。之后很难查找。使用命名约定。

没有替代文本。 影响无障碍访问，也不利于 SEO。在上传时要求填写替代文本。

存储无限增长。 旧素材和未使用的素材不断堆积。每季度清理一次，或采用自动生命周期策略。

只有一个人了解流水线。 此人不在时，没人能修复问题或接入新来源。请记录相关信息。

---

输出格式

媒体流水线文档包括：

• 清单： 当前素材数量、格式、存储情况；若数据不可用，则根据数据可用性规则说明缺口
• 流水线图： source → process → deliver → manage，并标明每个阶段使用的工具
• 格式和大小标准： 生成哪些内容，以及何时生成
• 命名和元数据约定： 附示例
• 按来源类型划分的工作流： 设计师、作者、摄影师、用户
• 性能基线和目标： 每页体积、格式采用情况等
• 素材库： 工具、分类体系、搜索、权利跟踪
• 监控： 性能、成本、损坏素材
• 路线图： 未来 1-2 个季度的改进计划

---

所需数据不可用时

此技能的输出依赖于其无法自行生成的数据、测量结果或工具结果。如果所需输入、工具或数据源不可用或无法验证，获准的输出方式是提供交付成果，并说明缺口：需要什么、实际获得或验证了什么，以及哪些输出部分受到影响。不得为了完成交付成果而捏造、估算或插补所需数字。说明缺口即为完整答复。

---

参考文件

• references/responsive-image-patterns.md：常见响应式图片场景（主图、内容图片、艺术指导、格式协商）的可直接复制粘贴的 HTML 模式，并附说明。