什麼是AVIF？如何在你的網站上使用AV1格式圖像

AV1圖像格式或AVIF是地球上最新的圖像編解碼器。AVIF是一種優化的圖像格式，旨在使咱們的圖像更小，同時保持相同的質量（無損），AVIF的文件擴展名是 .avif。

在本文中，我想談談它的功能和好處，以及爲何你應該開始使用AVIF。我還將向你展現在你的網站上包含AVIF圖像的安全方法。

什麼是AVIF，它如何工做？

AVIF是從開放媒體聯盟（AOM）開發的現在流行的視頻格式AV1的關鍵幀中提取的。

AOM開發AVIF的目的是提供免版稅的圖像，與現有的圖像格式相比，具備更好的壓縮效率和更多的功能支持。

AVIF如今有來自Google，Netflix和Apple等大公司的支持者。

爲何AVIF更好？

在它的前輩(WebP、JPEG-XR、JPEG2000 和PNG、GIF)以後，AVIF兼容高動態範圍成像。它支持全分辨率的10位和12位顏色，所生成的圖像比其餘已知格式小10倍。

AVIF對於Web開發人員是一個不錯的選擇，由於：

• 它是免版稅的，因此你能夠無償使用，不用擔憂受權問題。
• 目前，它獲得了許多大型技術公司的支持，例如Google，Amazon，Netflix，Microsoft等。
• 它具備最佳壓縮率。
• 它具備更多的現代功能，如透明度，HDR，寬色域等等。

如何開始使用AVIF圖像

如今，咱們進入本教程的有趣部分。開始使用AVIF圖像的主要方法有兩種：

1. 一種是將舊圖像轉換爲AVIF。
2. 另外一種方法是使用支持AVIF的圖像編輯器建立AVIF圖像。

如何將舊圖像轉換爲AVIF

因爲AVIF仍處於起步階段，所以以AVIF格式建立圖像的最簡單方法是轉換舊格式。

這能夠簡單地在線完成，由於有許多在線AVIF圖像轉換器。AVIF online converter是個人選擇，由於它更簡單，而且彷佛是可用最快的在線轉換器。

只需按照如下步驟將圖像轉換爲AVIF：

1. 訪問AVIF online converter。
2. 上傳你的舊圖片（能夠是PNG，JPEG，GIF等）。
3. 等待網站處理轉換。
4. 保存新的AVIF文件。

如何使用支持AVIF的圖像編輯器建立AVIF圖像

圖像編輯器增長了對AVIF圖像建立的支持。這些編輯器如今徹底支持AVIF圖像：

• Microsoft Paint –從「19H1」更新開始，你如今能夠在Microsoft Paint上以「另存爲」 AVIF格式繪製圖像。
• 用於Windows和Linux的GIMP從2.10.22更新開始就提供了AVIF支持。
• Photoshop開發人員也在討論如何支持AVIF，但願這將很快獲得支持。

如何在你的網站上使用AVIF

AVIF仍然是一種相對較新的技術。但如今大多數現代瀏覽器都支持這種格式，這意味着你能夠直接在 <img> 標籤中使用它。只是要記住，並非全部的瀏覽器都徹底支持該格式。

使用AVIF的最好方法是經過內容協商，咱們將使用支持內容協商的HTML 5 <picture> 和 <source>。

你能夠在此處查看實際示例：https://lyty.dev/diy/how-to-u...。

哪些瀏覽器支持AVIF

• 第一個徹底支持AVIF的瀏覽器是Chrome 85。
• Microsoft Windows 10還在「19H1」更新中添加了支持。
• Mozilla仍在努力支持Firefox中的圖像格式。

最後

AVIF是一個遊戲規則的改變者，很快就會成爲世界上真正的圖像格式。因爲它的潛在功能，它極可能很快就會在全部平臺上得到全面支持。

與谷歌的WebP圖像不一樣，蘋果花了整整10年的時間來支持，AVIF很快就引發了蘋果的興趣，以致於他們如今爲這個項目作出了貢獻。

你準備好在網站上開始使用AVIF了嗎？

---

原文：https://blog.zhangbing.site
來源：https://www.freecodecamp.org