什么是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圖像的主要方法有兩種：
- 一種是將舊圖像轉換為AVIF。
- 另一種方法是使用支持AVIF的圖像編輯器創建AVIF圖像。
如何將舊圖像轉換為AVIF
由于AVIF仍處于起步階段，因此以AVIF格式創建圖像的最簡單方法是轉換舊格式。
這可以簡單地在線完成，因為有許多在線AVIF圖像轉換器。AVIF online converter是我的選擇，因為它更簡單，并且似乎是可用最快的在線轉換器。
https://avif-converter.online/
只需按照以下步驟將圖像轉換為AVIF：
- 訪問AVIF online converter。
- 上傳你的舊圖片(可以是PNG，JPEG，GIF等)。
- 等待網站處理轉換。
- 保存新的AVIF文件。
如何使用支持AVIF的圖像編輯器創建AVIF圖像
圖像編輯器增加了對AVIF圖像創建的支持。這些編輯器現在完全支持AVIF圖像：
- Microsoft Paint –從“19H1”更新開始，你現在可以在Microsoft Paint上以“另存為” AVIF格式繪制圖像。
- 用于Windows和Linux的GIMP從2.10.22更新開始就提供了AVIF支持。
- Photoshop開發人員也在討論如何支持AVIF，希望這將很快得到支持。
如何在你的網站上使用AVIF
AVIF仍然是一種相對較新的技術。但現在大多數現代瀏覽器都支持這種格式，這意味著你可以直接在 標簽中使用它。只是要記住，并不是所有的瀏覽器都完全支持該格式。
使用AVIF的最好方法是通過內容協商，我們將使用支持內容協商的HTML 5
你可以在此處查看實際示例：https://lyty.dev/diy/how-to-use-avif-on-website.html。
哪些瀏覽器支持AVIF
- 第一個完全支持AVIF的瀏覽器是Chrome 85。
- Microsoft Windows 10還在“19H1”更新中添加了支持。
- Mozilla仍在努力支持Firefox中的圖像格式。
最后
AVIF是一個游戲規則的改變者，很快就會成為世界上真正的圖像格式。由于它的潛在功能，它很可能很快就會在所有平臺上獲得全面支持。
與谷歌的WebP圖像不同，蘋果花了整整10年的時間來支持，AVIF很快就引起了蘋果的興趣，以至于他們現在為這個項目做出了貢獻。
你準備好在網站上開始使用AVIF了嗎?
原文：https://www.freecodecamp.org/news/how-to-use-avif-images-on-your-website/
作者：Erisan Olasheni
本文轉載自微信公眾號「 前端全棧開發者」，可以通過以下二維碼關注。轉載本文請聯系 前端全棧開發者公眾號。
