下一代图片格式AVIF,赶紧用起!

介绍AVIF图片格式的特点和在Web端显示AVIF格式图片的两种方案。

1 简介

AVIF是一种基于AV1视频编码的新图像格式,相对于JPEG、Wep等图片格式压缩率更高,并且画面细节更好。AVIF通过使用更现代的压缩算法,在相同质量的前提下,AVIF文件大小是JPEG文件的35%左右。

AVIF支持高动态范围(HDR)和标准动态范围 (SDR)内容,包括常用的sRGB和BT.2020色彩空间。它支持8、10和12位的颜色深度、胶片颗粒保留、PNG图像的透明度以及GIF格式的动画。

2 兼容的浏览器及其版本

AVIF兼容多种浏览器。关于AVIF格式图片兼容的浏览器及其版本,请参见AVIF兼容性

3 兼容的浏览器如何显示AVIF格式的图片

对于AVIF格式图片兼容的浏览器,在Web端直接使用img标签即可显示图片。示例代码:

html 复制代码
<img
 src="https://image-compress-demo.oss-cn-zhangjiakou.aliyuncs.com/demo.jpg?x-oss-process=image/format,avif"
/>

4 不兼容的浏览器如何显示AVIF格式的图片

部分浏览器尚不支持AVIF,如果需要兼容多种浏览器,Web端在显示AVIF图片时,可以使用自动降级方案。

方案选型

方案 优点 缺点
方案一:使用picture标签 实现简单,代码量小。 浏览器降级处理时会先请求AVIF图片,然后请求原图,有一定的流量开销。目前此方案不支持IE浏览器和OperaMini,因为该浏览器不支持picture标签。picture标签的兼容性如下图所示:
方案二:使用CSS+JS方式 通过JS手动判断浏览器是否支持AVIF,不会造成流量损耗。 代码量较多,图片需要转成CSS样式进行渲染。

方案一:使用picture标签

采用HTML的picture标签,在picture标签中填写一个source标签和一个img标签,source标签设置为AVIF图片。浏览器会优先显示AVIF图片,如果浏览器渲染AVIF图片失败,就会再次请求img标签内的图片并正常渲染:

html 复制代码
<picture>
 <source
 srcset="https://image-compress-demo.oss-cn-zhangjiakou.aliyuncs.com/demo.jpg?x-oss-process=image/format,avif"
 type="image/avif"
 />
 <img
 src="https://image-compress-demo.oss-cn-zhangjiakou.aliyuncs.com/demo.jpg"
 />
</picture>

方案二:使用CSS+JS方式

除了使用picture标签外,还可以使用CSS+JS的方式,兼容显示AVIF图片。使用supportsAvif方法判断浏览器是否支持AVIF,如果支持就设置div的样式为avif,背景图片设置为AVIF图片。如果不支持就会设置div的样式为no-avif,背景图片设置为原图(其他格式备用图片也可以),具体代码如下所示:

JS代码

javascript 复制代码
Explainasync function supportsAvif() {
 if (!this.createImageBitmap) return false

 const avifData =
 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A='
 const blob = await fetch(avifData).then((r) => r.blob())
 return createImageBitmap(blob).then(
 () => true,
 () => false
 )
}

;(async () => {
 const classAvif = (await supportsAvif()) ? 'avif' : 'no-avif'
 document.body.classList.add(classAvif)
})()

CSS代码

css 复制代码
Explaindiv {
   background-repeat: no-repeat;
   background-size: 500px 200px;
   width: 500px;
   height: 200px;
 }
 .avif div {
   background-image: url(https://image-compress-demo.oss-cn-zhangjiakou.aliyuncs.com/demo.jpg?x-oss-process=image/format,avif);
 }
 .no-avif div {
   background-image: url(https://image-compress-demo.oss-cn-zhangjiakou.aliyuncs.com/demo.jpg);
 }

参考:

本文由博客一文多发平台 OpenWrite 发布!

相关推荐
都叫我大帅哥29 分钟前
深入浅出 Resilience4j:Java 微服务的“免疫系统”实战指南
java·spring cloud
Cao_Shixin攻城狮3 小时前
Flutter运行Android项目时显示java版本不兼容(Unsupported class file major version 65)的处理
android·java·flutter
Dcs5 小时前
还在用 Arrays.hashCode?Java 自己也能写出更快的版本!
java
fouryears_234177 小时前
Spring,Spring Boot 和 Spring MVC 的关系以及区别
java·spring boot·spring·mvc
阿葱(聪)8 小时前
java 在k8s中的部署流程
java·开发语言·docker·kubernetes
浮生带你学Java8 小时前
2025Java面试题及答案整理( 2025年 7 月最新版,持续更新)
java·开发语言·数据库·面试·职场和发展
板板正8 小时前
SpringAI——提示词(Prompt)、提示词模板(PromptTemplate)
java·spring boot·ai·prompt
板板正8 小时前
SpringAI——对话记忆
java·spring boot·ai
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
李长渊哦9 小时前
深入理解Java中的Map.Entry接口
java·开发语言