[[353544]]

AV1圖像格式或AVIF是地球上最新的圖像編解碼器。AVIF是一種優(yōu)化的圖像格式，旨在使我們的圖像更小，同時(shí)保持相同的質(zhì)量(無(wú)損)，AVIF的文件擴(kuò)展名是 .avif。

在本文中，我想談?wù)勊墓δ芎秃锰帲约盀槭裁茨銘?yīng)該開(kāi)始使用AVIF。我還將向你展示在你的網(wǎng)站上包含AVIF圖像的安全方法。

什么是AVIF，它如何工作?

AVIF是從開(kāi)放媒體聯(lián)盟(AOM)開(kāi)發(fā)的如今流行的視頻格式AV1的關(guān)鍵幀中提取的。

AOM開(kāi)發(fā)AVIF的目的是提供免版稅的圖像，與現(xiàn)有的圖像格式相比，具有更好的壓縮效率和更多的功能支持。

AVIF現(xiàn)在有來(lái)自Google，Netflix和Apple等大公司的支持者。

為什么AVIF更好?

在它的前輩(WebP、JPEG-XR、JPEG2000 和PNG、GIF)之后，AVIF兼容高動(dòng)態(tài)范圍成像。它支持全分辨率的10位和12位顏色，所生成的圖像比其他已知格式小10倍。

AVIF對(duì)于Web開(kāi)發(fā)人員是一個(gè)不錯(cuò)的選擇，因?yàn)椋?/p>

• 它是免版稅的，所以你可以免費(fèi)使用，不用擔(dān)心授權(quán)問(wèn)題。
• 目前，它得到了許多大型技術(shù)公司的支持，例如Google，Amazon，Netflix，Microsoft等。
• 它具有最佳壓縮率。
• 它具有更多的現(xiàn)代功能，如透明度，HDR，寬色域等等。

如何開(kāi)始使用AVIF圖像

現(xiàn)在，我們進(jìn)入本教程的有趣部分。開(kāi)始使用AVIF圖像的主要方法有兩種：

1. 一種是將舊圖像轉(zhuǎn)換為AVIF。
2. 另一種方法是使用支持AVIF的圖像編輯器創(chuàng)建AVIF圖像。

如何將舊圖像轉(zhuǎn)換為AVIF

由于AVIF仍處于起步階段，因此以AVIF格式創(chuàng)建圖像的最簡(jiǎn)單方法是轉(zhuǎn)換舊格式。

這可以簡(jiǎn)單地在線完成，因?yàn)橛性S多在線AVIF圖像轉(zhuǎn)換器。AVIF online converter是我的選擇，因?yàn)樗?jiǎn)單，并且似乎是可用最快的在線轉(zhuǎn)換器。

https://avif-converter.online/

只需按照以下步驟將圖像轉(zhuǎn)換為AVIF：

1. 訪問(wèn)AVIF online converter。
2. 上傳你的舊圖片(可以是PNG，JPEG，GIF等)。
3. 等待網(wǎng)站處理轉(zhuǎn)換。
4. 保存新的AVIF文件。

如何使用支持AVIF的圖像編輯器創(chuàng)建AVIF圖像

圖像編輯器增加了對(duì)AVIF圖像創(chuàng)建的支持。這些編輯器現(xiàn)在完全支持AVIF圖像：

• Microsoft Paint –從“19H1”更新開(kāi)始，你現(xiàn)在可以在Microsoft Paint上以“另存為” AVIF格式繪制圖像。
• 用于Windows和Linux的GIMP從2.10.22更新開(kāi)始就提供了AVIF支持。
• Photoshop開(kāi)發(fā)人員也在討論如何支持AVIF，希望這將很快得到支持。

如何在你的網(wǎng)站上使用AVIF

AVIF仍然是一種相對(duì)較新的技術(shù)。但現(xiàn)在大多數(shù)現(xiàn)代瀏覽器都支持這種格式，這意味著你可以直接在 標(biāo)簽中使用它。只是要記住，并不是所有的瀏覽器都完全支持該格式。

使用AVIF的最好方法是通過(guò)內(nèi)容協(xié)商，我們將使用支持內(nèi)容協(xié)商的HTML 5 和 <source> 。

你可以在此處查看實(shí)際示例：https://lyty.dev/diy/how-to-use-avif-on-website.html。

哪些瀏覽器支持AVIF

• 第一個(gè)完全支持AVIF的瀏覽器是Chrome 85。
• Microsoft Windows 10還在“19H1”更新中添加了支持。
• Mozilla仍在努力支持Firefox中的圖像格式。

最后

AVIF是一個(gè)游戲規(guī)則的改變者，很快就會(huì)成為世界上真正的圖像格式。由于它的潛在功能，它很可能很快就會(huì)在所有平臺(tái)上獲得全面支持。

與谷歌的WebP圖像不同，蘋果花了整整10年的時(shí)間來(lái)支持，AVIF很快就引起了蘋果的興趣，以至于他們現(xiàn)在為這個(gè)項(xiàng)目做出了貢獻(xiàn)。

你準(zhǔn)備好在網(wǎng)站上開(kāi)始使用AVIF了嗎?

原文：https://www.freecodecamp.org/news/how-to-use-avif-images-on-your-website/

作者：Erisan Olasheni

本文轉(zhuǎn)載自微信公眾號(hào)「 前端全棧開(kāi)發(fā)者」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系 前端全棧開(kāi)發(fā)者公眾號(hào)。