介紹AVIF圖片格式的特點(diǎn)和在Web端顯示AVIF格式圖片的兩種方案。
1 簡(jiǎn)介
AVIF是一種基于AV1視頻編碼的新圖像格式，相對(duì)于JPEG、Wep等圖片格式壓縮率更高，并且畫面細(xì)節(jié)更好。AVIF通過(guò)使用更現(xiàn)代的壓縮算法，在相同質(zhì)量的前提下，AVIF文件大小是JPEG文件的35%左右。
AVIF支持高動(dòng)態(tài)范圍（HDR）和標(biāo)準(zhǔn)動(dòng)態(tài)范圍 （SDR）內(nèi)容，包括常用的sRGB和BT.2020色彩空間。它支持8、10和12位的顏色深度、膠片顆粒保留、PNG圖像的透明度以及GIF格式的動(dòng)畫。
2 兼容的瀏覽器及其版本
AVIF兼容多種瀏覽器。關(guān)于AVIF格式圖片兼容的瀏覽器及其版本，請(qǐng)參見AVIF兼容性。
3 兼容的瀏覽器如何顯示AVIF格式的圖片
對(duì)于AVIF格式圖片兼容的瀏覽器，在Web端直接使用img標(biāo)簽即可顯示圖片。示例代碼：
<img
src="https://image-compress-demo.oss-cn-zhangjiakou.aliyuncs.com/demo.jpg?x-oss-process=image/format,avif"
/>
4 不兼容的瀏覽器如何顯示AVIF格式的圖片
部分瀏覽器尚不支持AVIF，如果需要兼容多種瀏覽器，Web端在顯示AVIF圖片時(shí)，可以使用自動(dòng)降級(jí)方案。
方案選型
| 方案 | 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|---|
方案一：使用picture標(biāo)簽 |
實(shí)現(xiàn)簡(jiǎn)單，代碼量小。 | 瀏覽器降級(jí)處理時(shí)會(huì)先請(qǐng)求AVIF圖片，然后請(qǐng)求原圖，有一定的流量開銷。目前此方案不支持IE瀏覽器和OperaMini，因?yàn)樵摓g覽器不支持picture標(biāo)簽。picture標(biāo)簽的兼容性如下圖所示：
|
方案二：使用CSS+JS方式 |
通過(guò)JS手動(dòng)判斷瀏覽器是否支持AVIF，不會(huì)造成流量損耗。 |
代碼量較多，圖片需要轉(zhuǎn)成CSS樣式進(jìn)行渲染。 |
方案一：使用picture標(biāo)簽
采用HTML的picture標(biāo)簽，在picture標(biāo)簽中填寫一個(gè)source標(biāo)簽和一個(gè)img標(biāo)簽，source標(biāo)簽設(shè)置為AVIF圖片。瀏覽器會(huì)優(yōu)先顯示AVIF圖片，如果瀏覽器渲染AVIF圖片失敗，就會(huì)再次請(qǐng)求img標(biāo)簽內(nèi)的圖片并正常渲染：
<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標(biāo)簽外，還可以使用CSS+JS的方式，兼容顯示AVIF圖片。使用supportsAvif方法判斷瀏覽器是否支持AVIF，如果支持就設(shè)置div的樣式為avif，背景圖片設(shè)置為AVIF圖片。如果不支持就會(huì)設(shè)置div的樣式為no-avif，背景圖片設(shè)置為原圖（其他格式備用圖片也可以），具體代碼如下所示：
JS代碼
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代碼
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);
}
參考：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-750176.html
- https://help.aliyun.com/zh/oss/user-guide/integrate-web-support-for-avif-images
本文由博客一文多發(fā)平臺(tái) OpenWrite 發(fā)布！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-750176.html
到了這里，關(guān)于下一代圖片格式AVIF，趕緊用起！的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
