Explore media formats for the web
Media & Web 进阶 20m

Web 媒体格式全解：JPEG-XL、AVIF、HEIC 与 MSE 优化

Explore media formats for the web

2023年6月5日

在 Apple 官方观看视频

一句话判断

Safari 17 新增 JPEG-XL、AVIF、HEIC 支持，配合 picture 元素你不需要做格式选择——让浏览器自己挑。

这场 Session 讲了什么

Jean-Yves Avenard 从 WebKit 团队出发，全面梳理了 Safari 支持的图片和视频格式：

传统三剑客。GIF（36 年历史，8 位色，适合简单动画但文件大）、JPEG（30 年历史，支持渐进加载，适合照片但无法透明）、PNG（26 年历史，支持透明和动画，适合 Logo 和插图但压缩率低）。这三个格式所有浏览器都支持，短期内不会消失。

Safari 17 新增四种现代格式。WebP（从 Safari 14 开始支持，压缩率优于传统格式，支持动画）；JPEG-XL（全新支持，可以从现有 JPEG 无损转换且体积减少最多 60%，支持渐进加载、宽色域和 HDR）；AVIF（基于 AV1 编解码器，广泛支持，比 JPEG 小最多 10 倍，支持 12 位色深和 HDR）；HEIC（iPhone 原生照片格式，硬件加速渲染，适合 WKWebView 内展示）。

picture 元素的优雅降级。不需要用 JavaScript 检测浏览器支持，用 <picture> 元素声明多个格式源，浏览器从上到下选择第一个支持的格式。

MSE（Media Source Extensions）优化和 AirPlay 支持。Safari 17 对 MSE 做了性能优化，并支持通过 MSE 实现 AirPlay 投屏。

值得深挖的点

JPEG-XL 的无损转换。这是 JPEG-XL 最杀手级的特性——你可以把现有的 JPEG 文件无损地转换为 JPEG-XL，体积减少最多 60%，画质完全不损失。迁移成本几乎为零。

宽色域和 HDR 的意义。JPEG-XL、AVIF 和 HEIC 都支持宽色域和 HDR。宽色域保留更多颜色信息，HDR 允许更暗的暗部和更亮的亮部。两者结合让户外风景、高对比度场景和复杂肤色呈现得更加生动。

HEIC 在 WKWebView 中的优势。iPhone 拍摄的照片就是 HEIC 格式，直接在 WKWebView 中展示不需要格式转换，而且有硬件加速。如果你的 App 内嵌 Web 内容展示用户照片，HEIC 是最优选择。

代码片段

<!-- 使用 picture 元素实现格式优雅降级 -->
<picture>
    <!-- 优先使用 HEIC（Apple 设备硬件加速） -->
    <source srcset="photo.heic" type="image/heic">
    <!-- 其次使用 JPEG-XL（高压缩率，渐进加载） -->
    <source srcset="photo.jxl" type="image/jxl">
    <!-- 再次使用 AVIF（广泛支持，高压缩率） -->
    <source srcset="photo.avif" type="image/avif">
    <!-- 最后使用 WebP（良好压缩率） -->
    <source srcset="photo.webp" type="image/webp">
    <!-- 兜底使用 JPEG（所有浏览器支持） -->
    <img src="photo.jpg" alt="照片描述">
</picture>
<!-- MSE + AirPlay 支持示例 -->
<video id="player" airplay="allow">
    <!-- MSE 内容通过 JavaScript 动态加载 -->
</video>
<script>
    // 创建 MediaSource 并连接到 video 元素
    const mediaSource = new MediaSource();
    video.src = URL.createObjectURL(mediaSource);
    
    mediaSource.addEventListener('sourceopen', () => {
        const sourceBuffer = mediaSource.addSourceBuffer(
            'video/mp4; codecs="avc1.64001f"'
        );
        // 追加视频片段...
    });
</script>

最佳实践

  • 不要只选一种现代格式——用 <picture> 元素提供多种格式，让浏览器选最优的。
  • JPEG-XL 的无损 JPEG 转换是降低带宽成本的捷径。
  • AVIF 作为兼容性最好的现代格式，应该始终包含在备选列表中。
  • 在 WKWebView 中展示 iPhone 照片时直接用 HEIC，省去转换开销。
  • 传统格式（JPEG、PNG、GIF）仍然需要作为兜底，短期内不能去掉。

还有什么值得关注

  • HTTP Live Streaming (HLS) 自 2009 年推出以来一直是自适应流媒体的标准方案
  • Safari 17 对 MSE 的性能优化对视频网站意义重大
  • WebP 的动画支持是 GIF 替代的实用选择
  • HDR 内容在支持 HDR 显示的设备上会有明显的视觉提升
WWDC 2023