HTML5多媒体压缩需平衡兼容性、画质、性能与设备适配：视频优先MP4（H.264）+WebM双源，分辨率≤1280×720，FFmpeg推荐参数-vcodec libx264 -crf 28 -preset fast -movflags +faststart，禁音并preload="metadata"。
HTML5 多媒体素材压缩不是追求“越小越好”，而是要在兼容性、画质/音质可接受、加载性能和设备适配之间找平衡点。关键不是换格式，而是选对参数、控好尺寸、按需交付。
视频：优先 MP4（H.264） + WebM 双源，分辨率不超 1280×720
• 浏览器支持最广的是 H.264 编码的 MP4，必须作为主源；Firefox 和新版 Chrome 更倾向 WebM（VP9），建议用 <video> 的 <source> 标签提供双格式备选
• 背景视频或非主视觉内容，分辨率严格限制在 1280×720 以内——更高分辨率只增加首屏延迟和内存压力，无实际体验提升
• 用 FFmpeg 压缩时推荐参数：-vcodec libx264 -crf 28 -preset fast -movflags +faststart，其中 CRF 28 是画质与体积较优的临界点
• 禁用音频轨道（设 muted 属性），并始终加 preload="metadata"，避免预加载整段视频
动画：SVG > Canvas > GIF/WebM，能矢量不动态位图
• 图标、转场、加载动效等规则图形，一律优先用 SVG + CSS @keyframes 或 Web Animations API 实现；体积可比同等 Canvas 动画小 60% 以上，且缩放无损、可 gzip 压缩
• 避免在 SVG 中内嵌 Base64 图片；如必须，先用 SVGO 工具压缩再嵌入
• 若必须用视频类动画（如微交互动画），导出 WebM 时禁用默认高质量设置，加参数 -g 30 -crf 32 -pix_fmt yuv420p 控制 GOP 和色度采样，防止体积虚高
图片：WebP 为主，AVIF 次之，JPEG/PNG 仅作降级
• 新项目默认用 WebP：同画质下比 JPEG 小 25–35%，比 PNG 小 50%+，Chrome/Firefox/Safari（iOS 14+）均已原生支持
• 对支持 AVIF 的环境（Chrome 85+、Firefox 93+、Safari 16.4+），可搭配 <picture> 提供 AVIF 源，体积比 WebP 再降 10–20%
• 旧浏览器降级方案写法示例：
<picture><br> <source srcset="img.avif" type="image/avif"><br> <source srcset="img.webp" type="image/webp"><br> <img src="img.jpg" alt="..."><br></picture>
• 所有图片须配合
srcset + sizes 实现响应式加载，禁止“一张大图适配所有设备”
立即学习“前端免费学习笔记（深入）”；
音频：AAC 编码 MP4 容器，采样率不超 44.1kHz
• 音频素材统一用 MP4 容器封装 AAC 编码（audio/mp4），兼容性远超 Ogg Vorbis 或 Opus，且 iOS/macOS 全系支持
• 人声类音频（如旁白、提示音）采样率设为 22.05kHz 或 32kHz 即可；音乐类保留 44.1kHz，但禁用 48kHz——后者不提升听感，反增体积与解码负担
• 用 FFmpeg 压缩命令示例：ffmpeg -i input.mp3 -c:a aac -b:a 64k -ar 44100 output.m4a，码率 48–96k 足够覆盖多数 H5 场景
