媒体文件

媒体文件是计算机中用于存储和传输信息的各种数字资源。根据用途和特性，媒体文件可以分为多种类型：文本文件，文档文件，图片文件，音频文件，视频文件，3D 模型文件，压缩文件。

文档文件

文档文件通常用于创建、编辑和存储各种类型的文书工作。从传统的 Office 办公套件到现代的 Markdown 轻量级标记语言，文档格式的演进反映了人们对便捷性和兼容性的不断追求。

纯文本

纯文本文件虽然压缩性不如二进制格式，但具有良好的可读性、可编辑性和强大的兼容性：

• Markdown (.md)：轻量级标记语言，易读易写，支持基本的格式化
• CSV (.csv)：逗号分隔值文件，用于存储表格数据

Office 办公文档

微软 Office 系列是最常见的办公文档格式：

• doc/docx（Microsoft Word 文档）：用于文字处理和排版
• xls/xlsx（Microsoft Excel 电子表格）：用于数据处理和表格计算
• ppt/pptx（Microsoft PowerPoint 演示文稿）：用于演示文稿制作

注意：这些文件都是二进制格式，只能使用特定的软件才能打开，跨平台兼容性相对较差。

PDF

PDF（Portable Document Format）由 Adobe 公司开发，是一种广泛使用的文档格式。它具有以下特点：

• 跨平台兼容性强：可以在多数设备和软件中正常显示
• 排版一致性：不会因为不同应用而出现排版差异
• 浏览器原生支持：可以使用 <iframe> 或 <embed> 标签直接在网页中展示
• 安全性好：支持加密和权限控制

由于其优秀的兼容性和一致性，PDF 已经成为文档打印和分享的事实标准。在实际工作中，PDF 常被用作 Office 文档的最终定稿格式。

图片文件

图片文件是视觉信息的载体，分为位图（栅格图像）和矢量图两大类型。两种类型在原理、应用场景和处理方式上有明显区别。

格式

浏览器原生支持多种主流图片格式，各有特点：

矢量图形

• SVG（Scalable Vector Graphics）：基于 XML 语法的纯文本文件，存储的是图形绘制指令而非像素数据。可无限缩放而不失真，可以直接内联到 HTML 中，作为 DOM 元素与 CSS 联动，支持滤镜、动画、渐变等高级特性，文件体积小，适合存储简单图形（如图标、徽标、图表），支持透明色。

位图格式

• WebP（Web Picture）：Google 开发的专为 Web 优化的现代图片格式。在保持高画质的同时提供强大的压缩能力，同时支持有损和无损压缩，支持透明色和动画，网络传输效率高。
• PNG（Portable Network Graphics）：无损压缩的位图格式。支持透明背景和 alpha 通道（半透明），颜色深度高（最高 48 位），色彩丰富细腻，适合需要透明背景的图标、徽标等，文件体积较大。
• JPEG/JPG（Joint Photographic Experts Group）：有损压缩的位图格式。压缩率高，适合照片和复杂图像，不支持透明色，广泛应用于摄影作品和网页图片。
• GIF（Graphics Interchange Format）：支持动画的位图格式。支持简单动画效果，色彩有限（256 色），支持透明色，适合简单的动态图标和表情包。
• ICO（Icon File）：专门用于存储图标的格式。支持多尺寸图标存储，支持透明色，主要用于网站 favicon 和 Windows 系统图标。

图片处理软件

图片绘制软件（创作）用于从零开始设计和创作图像：

• Krita：开源的数字绘画软件，提供丰富的笔刷和绘画工具，适合插画和概念艺术创作。

图片编辑软件（处理）用于处理和加工已有图片：

位图编辑：

• Adobe Photoshop (PS)：业界标准的位图编辑软件，功能强大，适合照片修图和图像合成。
• GIMP（GNU Image Manipulation Program）：开源免费的 PS 替代品，功能完善，跨平台支持。

矢量图编辑：

• Adobe Illustrator (AI)：专业的矢量图形设计软件，适用于标志设计、插图和排版。
• Inkscape：开源免费的矢量图形设计软件，是 AI 的开源替代品。

动画制作软件

• Spine：2D 游戏骨骼动画制作软件，游戏行业的主流工具，通过骨骼绑定实现流畅的角色动画。

VS Code 图片插件

• Draw.io Integration：流程图和图表编辑器插件。基于开源项目 draw.io，使用矢量图进行编辑，数据文件（.drawio 或 .dio）是纯文本 XML 格式，可导出为 SVG、HTML、PNG 等多种格式，支持 .drawio.svg 和 .drawio.png 等特殊格式
• Luna Paint - Image Editor：直接在 VS Code 中编辑图片。覆盖默认图片预览器，支持裁剪、绘制、基本图形、颜色填充等功能
• Paste Image：快速粘贴剪贴板图片。自动保存图片到工作区，在 Markdown 文件中自动插入图片引用链接

音频文件

音频文件主要分为两类：一类是存储实际声音波形数据的音频文件，另一类是存储乐器演奏指令的 MIDI 文件。

音频格式

浏览器原生支持多种主流音频格式，可分为以下几类：

通用音频格式

• MP3（MPEG-1 Audio Layer III）：最流行的有损压缩格式。几乎所有浏览器都支持，高比特率（256kbps 或 320kbps）下音质优秀，文件大小适中，适合网络传输，应用场景：音乐、播客、有声书、网站背景音乐。
• AAC（Advanced Audio Coding）：MP3 的改进版。主流浏览器都支持，同比特率下音质优于 MP3，文件更小，效率更高，应用场景：流媒体服务、在线音乐、视频音轨。

高音质格式

• WAV（Waveform Audio File Format）：无压缩格式。几乎所有浏览器都支持，音质最高，但文件体积大，应用场景：专业音频制作、编辑、高质量音频存储。
• FLAC（Free Lossless Audio Codec）：无损压缩格式。浏览器支持有限，音质与 WAV 相当，但文件体积比 WAV 小，应用场景：高保真音乐收藏和传输。

特殊用途格式

• Opus（Opus Interactive Audio Codec）：专为 Web 设计的现代音频格式。由 IETF 标准化，现代浏览器支持良好（Safari 较差），高效的有损压缩，同时适合语音和音乐，文件极小，适合实时传输和低延迟应用，开放格式，无专利限制，应用场景：VoIP、实时通讯、游戏音效、流媒体。
• MIDI（Musical Instrument Digital Interface）：乐器数字接口。不包含音频数据，仅包含乐器演奏指令，文件极小，应用场景：乐器控制、音乐制作、电子乐器。

音频处理软件

音乐创作软件

• Steinberg Cubase：专业级音乐制作工作站（DAW），适合电子音乐创作和编曲。

音频编辑软件

• Audacity：功能强大的开源音频编辑软件。使用 Qt 框架开发，跨平台支持，支持多轨录音和编辑、效果处理、格式转换，免费且功能完善
• Pro Tools：行业标准的专业音频工作站。提供最高水平的录音、编辑、混音和后期处理工具，广泛应用于影视音频制作和音乐工业

视频文件

视频文件比音频和图片更加复杂，涉及容器格式和编码格式两个层面。容器格式定义了如何组织和存储视频、音频、字幕等数据流，而编码格式决定了数据的压缩方式。

容器格式

容器格式是视频文件的"外壳"，用于封装和组织多种数据流：

• MP4（MPEG-4 Part 14）：最广泛使用的容器格式。支持多种音频、视频和字幕编码，高兼容性，几乎所有设备和浏览器都支持，压缩效率良好，应用场景：网络视频流、本地播放。
• WebM（Web Media）：Google 开发的开源容器格式。专为 Web 优化，传输效率高，免费开源，无专利限制，现代浏览器支持良好，应用场景：HTML5 视频、在线流媒体。
• Ogg（Ogg Vorbis）：开放的多媒体容器格式。开源格式，无专利限制，同时支持音频和视频，现代浏览器支持较好（Safari 较差），应用场景：开源项目、游戏音效和视频。
• MKV（Matroska）：功能强大的开源容器格式。支持多种视频、音频编码和多轨字幕，可包含多个音轨和字幕轨，适合高质量视频存储，应用场景：高清视频收藏、多语言视频。

编码格式

编码格式决定了视频数据的压缩方式和质量：

• H.264 (AVC)：最常用的视频编码标准。高压缩率和优秀的视频质量，广泛应用于各种场景，应用场景：网络流媒体、蓝光光盘、视频会议。
• H.265 (HEVC)：H.264 的继任者。提供更高的压缩效率（比 H.264 提升约 50%），更好的视频质量，特别适合高分辨率视频，应用场景：4K/8K 视频流、蓝光光盘、高清流媒体。
• VP8 / VP9：Google 开发的开放编码格式。免费开源，无专利费用，VP9 压缩效率接近 H.265，YouTube 大量使用，应用场景：网络视频流、在线平台。
• AV1（AOMedia Video 1）：新一代开源编码格式。由 Alliance for Open Media 开发，提供非常高的压缩效率（比 H.265 提升 30%），免费开源，浏览器支持逐步普及，应用场景：未来的高效视频流和存储。

视频处理软件

专业视频编辑

• Adobe Premiere Pro (PR)：行业标准的视频编辑软件。专业级的视频剪辑、合成、颜色校正、音频处理，与 Adobe 生态系统无缝集成，应用场景：影视制作、广告片、Vlog。
• DaVinci Resolve：专业的免费视频编辑软件。免费版功能强大，包含剪辑、调色、音频后期，付费版（$300 一次性购买）提供更多高级功能，在没有预算使用 PR 时的最佳选择。
• Adobe After Effects (AE)：专业视觉效果和动画制作软件。强大的特效合成能力，支持 3D 渲染和动画，应用场景：视频后期、特效制作、动态图形。

播放与转码

• VLC Media Player：开源免费的多功能视频播放器。
  • 支持几乎所有视频格式
  • 提供视频转码和简单编辑功能
  • 跨平台支持

3D 模型文件

3D 模型文件用于存储三维物体的几何、材质、动画等信息，广泛应用于游戏开发、影视制作、工程设计和 3D 打印等领域。

格式

• FBX（Filmbox）：行业标准的通用 3D 格式。由 Autodesk 开发，已成为事实标准，支持几何、材质、骨骼、动画、灯光等完整信息，应用场景：游戏开发、VR/AR、动画制作。
• glTF/GLB（GL Transmission Format）：Web 3D 的标准格式。开放标准，专为 Web 和实时渲染设计，glTF 是 JSON 文本格式，GLB 是二进制格式，支持几何、材质、动画和物理特性，浏览器原生支持良好，应用场景：Web 3D 展示、VR/AR 应用、移动端 3D。
• OBJ（Wavefront OBJ）：简单通用的 3D 模型格式。纯文本格式，易于解析和编辑，支持几何形状和基本材质映射，不支持动画和骨骼，应用场景：静态模型交换、3D 打印前期处理。
• STL（Stereolithography）：专为 3D 打印设计的格式。仅描述三维表面的三角面片，不包含颜色、材质等信息，应用场景：3D 打印、快速原型制造、工程设计。

3D 建模软件

通用建模软件

• Blender：开源免费的全能 3D 创作套件。功能强大，支持建模、雕刻、动画、渲染、VFX，完全免费，社区活跃，适合个人和小型团队，应用场景：动画制作、游戏开发、建筑可视化。
• Autodesk Maya：影视行业标准的 3D 软件。功能丰富，强大的动画和建模工具，行业认可度高，应用场景：影视特效、角色动画、游戏开发。
• Autodesk 3ds Max：专注于游戏和建筑的 3D 软件。强大的建模、动画和渲染工具，插件生态丰富，应用场景：游戏开发、建筑可视化、VR/AR。

专业化软件

• ZBrush：数字雕刻领域的标准软件。专注于高精度雕刻和细节塑造，支持高分辨率模型（百万级多边形），应用场景：角色建模、游戏美术、电影特效。
• Houdini：程序化建模和特效制作软件。基于节点的工作流程，强大的模拟和程序化生成能力，应用场景：电影特效、复杂模拟、技术美术。
• Cinema 4D：易用的 3D 设计软件。用户友好的界面，学习曲线平缓，支持建模、动画、渲染和物理模拟，应用场景：广告制作、动画制作、电影特效。

工程设计软件

• SketchUp：简单易用的建筑建模工具。快速建模和设计，适合建筑设计初期阶段，应用场景：建筑设计、室内设计、工程规划。
• SolidWorks：专业的工程设计软件。强大的实体建模和工程分析工具，参数化设计，应用场景：机械设计、产品设计、制造业。

游戏美工流程

游戏美术资源的典型制作流程：

1. 建模（Blender/Maya/ZBrush）：创建 3D 模型的几何形状
2. 贴图（Substance Painter/Krita）：为模型绘制纹理和细节
3. 材质（Blender/Unity/Unreal Engine）：设置材质属性和着色器
4. 特效（Niagara/VFX Graph/Houdini）：制作粒子效果和视觉特效
5. 动画（Blender/Maya）：创建角色动画和运动
6. 导出与优化：导出为 FBX/glTF 格式，导入游戏引擎（Unity、Unreal Engine、Bevy）

压缩文件

压缩文件用于减少文件大小，便于存储和传输。不同的压缩格式在压缩率、速度和兼容性上各有特点。

压缩格式

• ZIP：最通用的压缩格式。广泛使用，几乎所有操作系统原生支持，无损压缩，兼容性强，压缩率一般，但速度快，应用场景：通用文件压缩和分发。
• RAR：高压缩率的商业格式。压缩率高于 ZIP，支持分卷压缩和恢复记录，需要专门软件解压（WinRAR），应用场景：大文件压缩和分发。
• 7Z：开源的高压缩率格式。压缩率最高，支持多种压缩算法和加密，开源免费，应用场景：需要极致压缩率的场景。
• TAR：UNIX/Linux 的打包格式。不进行压缩，仅用于打包文件，常与 gzip 或 bzip2 结合使用（.tar.gz, .tar.bz2），保留文件权限和目录结构，应用场景：UNIX/Linux 系统的文件打包。
• GZ（Gzip）：GNU 压缩格式。支持流式压缩，常用于单文件压缩，Linux 系统广泛使用，应用场景：UNIX/Linux 系统的文件压缩、Web 内容压缩。

压缩软件

• Bandizip：开源免费的压缩软件，支持多种格式，界面友好。
• 7-Zip：开源免费的高压缩率软件，支持 7z、ZIP、RAR 等多种格式。
• tar：UNIX/Linux 系统的标准压缩工具，用于归档和压缩。

Web 端媒体编辑

在 Web 应用中，除了基本的 HTML、CSS、JavaScript 等代码文本文件，浏览器还原生集成了对多种媒体资源格式的支持，包括图片、音频、视频等。受限于 Web 端性能，Web 媒体编辑主要集中在文本、文档和图片这三类。在这些领域，Markdown 和 SVG 具有特殊地位。Markdown 和 SVG 的优势：

• 纯文本格式：易于版本控制和协作
• Web 兼容性强：浏览器原生支持或易于实现
• 通用性高：跨平台、跨工具支持良好
• 可编辑性好：可以使用任何文本编辑器编辑

web 端技术选用

• 文本文件。纯文本文件无需定稿
  • markdown 文件。在 Web 端的一等公民，具有强大的兼容性和可定制性，能够支持简单的排版和样式，能够基于各种编辑器使用扩展语法，例如：github 的 emoji 扩展、html 标签混用、数学公式扩展等。还有一些 SSG 框架中的特殊扩展语法，例如 vitepress 静态站点生成、slidev 演示文稿生成。相较于 word 文档，它牺牲了一定的功能，换来了其轻量性。
  • 代码文件。纯文本，但是需要提供文字的语法高亮显示和智能提示。
• 文档文件。在 Web 端上一般称为富文本编辑器，可以分为传统派和块风格。需要定稿成 pdf 文件。
  • 传统富文本编辑器 (WYSIWYG)，支持尽可能趋近于 word 文档的 web 端富文本编辑。
  • 块风格文本编辑器（Block-style），对 word 做减法，支持有限的 word 能力，提供更加简洁的功能集和强大的兼容性。
  • 数据表格编辑器（web 端数据处理）
• 图片文件。定稿成 svg 或者 png。
  • 矢量图形 svg。使用数学公式和几何形状（如点、线、曲线和多边形）来描述图像。这意味着图像是通过一系列指令生成的，而不是固定的像素网格。由于 svg 在 web 端的强大兼容性，web 端的图形经常使用 svg 作为载体。相较于栅格图像，它牺牲了复杂图像的描述能力，换来了其轻量性和纯文本描述的能力。
  • 栅格图像 png、jpg、gif。由像素网格组成，每个像素都有特定的颜色和位置。图像在放大的时候会由于像素的密度不够而导致图像模糊，并且在特定的像素下，展示图像会出现锯齿的情况。

推荐框架或库：

• 文本文件：
  • markdown：marked、markdown-it
  • 代码文件：Codemirror、Monaco Editor
• 文档文件
  • WYSIWYG：quill、tinymce，前者开源免费，后者免费版阉割
  • block-style：Editor.js
  • 数据表格：Handsontable
  • 演示文件：slidev、revealjs
• 图片文件
  • 矢量图像：draw.io
  • 栅格图像：tui-editor