跳到主要内容

媒体资源使用指南

媒体资源是现代网站和应用不可或缺的一部分，它们能够增强用户体验、提供信息和吸引注意力。本指南提供了有关使用图片、音频和视频的最佳实践，旨在帮助开发者充分利用媒体资源，同时保持网站性能和无障碍性。

媒体资源概述​

我们的媒体资源使用遵循以下核心原则：

  • 格式优先级：优先使用现代高效格式，同时提供传统格式作为兜底
  • 性能优化：通过懒加载、响应式设计和适当压缩减少带宽占用
  • 无障碍设计：确保所有媒体内容对所有用户可访问
  • 渐进增强：基于浏览器能力提供最佳体验

媒体类型​

图片​

图片是最常用的媒体类型之一，能够快速传达信息和增强视觉吸引力。

主要特点：

  • 支持 SVG、AVIF、WebP、JPEG、PNG 等格式
  • 响应式图片技术
  • 图片优化和压缩策略

查看图片使用指南 →

音频​

音频内容可以丰富用户体验，提供语音信息或背景音乐。

主要特点：

  • 支持 Opus、AAC、Vorbis、MP3 等格式
  • 可访问性考虑
  • 音频播放控制和优化

查看音频使用指南 →

视频​

视频是最丰富的媒体形式，能够结合视觉和听觉元素传达信息。

主要特点：

  • 支持 AV1、VP9、H.265、H.264 等编解码器
  • 多格式容器支持（WebM、MP4、OGV）
  • 响应式视频设计和性能优化

查看视频使用指南 →

通用最佳实践​

无论使用哪种媒体类型，以下最佳实践都适用：

性能优化​

  • 懒加载：使用 loading="lazy" 属性或 Intersection Observer 延迟加载非关键媒体
  • 适当尺寸：提供与显示需求匹配的媒体尺寸
  • 预加载：对关键媒体资源使用 <link rel="preload">
  • CDN 使用：利用内容分发网络减少加载时间

响应式设计​

  • 适应不同屏幕：确保媒体内容在各种设备上正常显示
  • 备选格式：为不同浏览器和设备能力提供多种格式
  • 灵活布局：使用 CSS 创建灵活的媒体容器

无障碍性​

  • 替代文本：为所有非文本内容提供文本替代
  • 字幕和转录：为音频和视频内容提供字幕或文本转录
  • 键盘可访问性：确保所有媒体控件可通过键盘操作
  • 减少动画干扰：尊重用户的减少动画偏好设置

技术选择指南​

在选择媒体格式和技术时，请考虑以下因素：

  1. 目标受众：了解您的用户使用的设备和浏览器
  2. 内容类型：不同类型的内容（如照片、图标、语音、音乐）适合不同的格式
  3. 性能要求：考虑带宽限制和加载时间要求
  4. 质量需求：在文件大小和质量之间找到平衡
  5. 无障碍需求：确保所有用户都能访问您的媒体内容

每种媒体类型的详细使用指南，请参阅各自的文档。