2.3 · 网页文件格式
目标： 为网页挑对多媒体格式。
网页图像格式
| 格式 | 压缩 | 最适合 | 备注 |
|---|---|---|---|
| JPEG / JPG | 有损 | 相片 | 文件小，无透明 |
| PNG | 无损 | 徽标、图标、截图 | 支援透明 (alpha) |
| GIF | 无损，256 色 | 简短动画 | 多被 MP4/WebM 取代 |
| WebP | 两者皆有 | 现代相片 / 图形 | 同质下比 JPG 小 |
| SVG | 矢量（无损） | 徽标、图标、图表 | 任意缩放不糊 |
网页音讯格式
| 格式 | 压缩 | 最适合 |
|---|---|---|
| MP3 | 有损 | 音乐、播客 |
| AAC | 有损 | Apple 生态、YouTube |
| OGG / OPUS | 有损 | 开源友好 |
| WAV | 无 | 母版，网上少用 |
网页影片格式
| 格式 / 编解码 | 用途 |
|---|---|
| MP4 (H.264) | 通用现代标准 |
| WebM (VP9 / AV1) | 免授权替代 |
| HLS / DASH | 自适应串流 —— 按需提供不同码率 |
明智选择
文件越小 = 加载越快 = 体验越好与 SEO 越好。经验法则：
- 相片 → JPG 或 WebP。
- 徽标 / 图标 → SVG 或 PNG。
- meme / 短片 → MP4（取代 GIF）。
- 语音 / 音乐 → MP3 或 AAC。
插件、播放器、辅助工具
课程指引提到浏览器插件与播放器。现代浏览器原生播多数媒体（HTML5 <video> 与 <audio> 标签），减少对旧插件如 Flash（官方已死）的依赖。
搜索引擎与资讯评估
指引还列「制定有效搜索策略」与批判性分析来源可靠性 —— 伦理见模块 E，但实用网页技能包括：
- 用引号做精确短语。
- 用
site:限定域。 - 用
-排除词。 - 多个独立来源交叉核实。
考试式题目
题（4 分）： 为学校网站以下各项推荐合适的文件格式： (a) 学校建筑的高质相片。 (b) 透明背景的校徽。 (c) 30 秒的简介影片。 (d) 校长的欢迎语音。
参考答案：
(a) JPG（或 WebP） —— 相片有损压缩效果好，无感知质损。 (b) PNG（或 SVG） —— 支援透明、边缘无损。若是矢量则 SVG 可任意缩放。 (c) MP4 (H.264) —— 通用影片格式，现代所有浏览器与设备都能播。 (d) MP3（或 AAC） —— 小型压缩音讯，跨平台支援。
关键要点
- 按媒介与网页性能配格式。
➡️ 下一节：2.4 串流与云