AVIF 格式介绍

IsaacZ

AVIF（AV1 Image File Format）是一种基于开源AV1视频编解码器的现代图像格式。 它由开放媒体联盟（AOM）开发，该联盟成员包括亚马逊、谷歌、英特尔、微软和Netflix等巨头。Netflix于2020年首次公布了这一格式。

AVIF旨在成为下一代网络图像标准，其核心目标是在保证甚至提升图像质量的同时，显著减小文件体积。

🚀 核心优势：为何AVIF备受瞩目

AVIF最突出的优势是其卓越的压缩效率，这得益于其先进的算法。

• 顶级的压缩率：大量测试表明，在相同图像质量下，AVIF的文件体积远小于其他格式。
  
  • 相比JPEG，AVIF文件体积平均能减小约50%，部分极端测试甚至达到小10倍的效果。
  • 相比WebP，AVIF文件体积能再减小20%至30%。
    
• 功能全面，一专多能：和WebP一样，AVIF也是一个“全能选手”，集多种传统格式的优点于一身。
  
  • 支持有损与无损压缩。
  • 支持透明通道（Alpha通道），可替代PNG。
  • 支持动画，可替代GIF。
  • 支持高动态范围（HDR）和广色域（WCG），这是其领先于WebP的一项重要特性，能呈现更丰富、逼真的色彩和亮度细节。
    

⚙️ 工作原理：如何实现高效压缩

AVIF的高效压缩源于其“大哥”——AV1视频编码技术。你可以把AVIF看作是AV1视频的“关键帧”截图。

   更智能的压缩方式：它引入了更灵活的分区方式（如128128的超级块）和更精细的预测模式（支持10或12位色深、56种角度预测等），让压缩更精准。

• 先进的滤波技术：通过方向约束增强滤波、自引导环路复原滤波等技术，在压缩后能更好地修复图像质量。
  

⚠️ 缺点与挑战

尽管优势明显，AVIF目前也面临一些挑战：

• 编码耗时较长：由于算法复杂，AVIF的编码速度显著慢于WebP。对于需要实时或大量处理图片的场景，这可能是一个瓶颈。
• 解码性能开销：在某些平台（尤其是苹果的Safari浏览器）上，解码AVIF，特别是动图时，可能会出现CPU占用高、播放卡顿的问题。
• 不支持渐进式渲染：AVIF不像JPEG那样可以逐步加载显示，必须完整下载后才能呈现。
• 生态与工具链仍在完善：虽然进步很快，但AVIF相关的编辑、查看和转换工具生态相比JPEG、PNG等传统格式仍不够成熟。
  

🌐 兼容性与使用现状

• 浏览器支持度快速提升：AVIF的浏览器支持率正迅速追赶WebP，目前已达到约93-94%。
  
  • Chrome：自85版本起支持。
  • Edge：自121版本起支持。
  • Firefox：自93版本起支持。
  • Safari：自16.4版本起支持。
  • 主流移动端浏览器（如Android Chrome、Samsung Internet等）也已支持。
    
• 主要不支持群体：主要是Internet Explorer等老旧浏览器，以及部分版本较旧的Safari（特别是iOS端）。
  

🆚 AVIF vs. WebP：如何选择？

特性	AVIF	WebP
压缩效率	更优，文件体积通常比WebP小20-30%	优秀，比JPEG小25-34%
图像质量	更高，尤其在HDR、广色域和渐变色表现上	良好
功能特性	更丰富，支持HDR/广色域	支持透明、动画，但不支持HDR
编码速度	较慢，计算成本高	更快
解码性能	在某些平台（如Safari）上可能较慢	通常更快
浏览器支持	良好，约93-94%，且快速增长	极佳，约97%，近乎通用

选择建议：

• 追求极致性能与前沿：如果你的目标用户大多使用现代浏览器，并且对图片加载速度有极高要求（如电商、新闻、图片社区），AVIF是更优选择。
• 追求稳定与广泛兼容：如果希望以最低的成本覆盖最广的用户，且对编码速度有要求，WebP仍是稳妥的起点。
  

💡 如何在项目中使用AVIF

最推荐的方式是渐进增强，即为支持的浏览器提供AVIF，为不支持的提供回退方案。

• 使用 <picture> 元素：这是最标准、简洁的方式。浏览器会从上到下选择第一个支持的格式。   
  1.     <picture>
     
  2.       <!-- 优先尝试 AVIF -->
     
  3.       <source srcset="image.avif" type="image/avif">
     
  4.       <!-- 如果 AVIF 不支持，尝试 WebP -->
     
  5.       <source srcset="image.webp" type="image/webp">
     
  6.       <!-- 如果以上都不支持，使用 JPEG 或 PNG 作为最终回退 -->
     
  7.       <img src="image.jpg" alt="描述">
     
  8.     </picture>
     

  复制代码
  
  
• 服务端内容协商：服务端根据客户端HTTP请求头中的 Accept 字段来判断其是否支持AVIF，并返回最合适的格式。这是最智能、高效的方式。
• 使用转换工具：你可以通过以下工具将现有图片转换为AVIF格式。
  
  • 在线工具：如 Squoosh。
  • 命令行工具：如官方编码库 libavif。
    
  
  
  总的来说，AVIF凭借其卓越的压缩性能和丰富的功能特性，代表了图片格式的未来方向。虽然目前在编码速度和部分平台兼容性上仍有提升空间，但对于追求极致性能的现代Web应用，它已经是一个极具价值的选择。