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

什么是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。

1. 另一種方法是使用支持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，希望這將很快得到支持。

https://www.houdianzi.com/dllogo/ 大連logo設計

如何在你的網站上使用AVIF

AVIF仍然是一種相對較新的技術。但現在大多數現代瀏覽器都支持這種格式，這意味着你可以直接在 <img> 標簽中使用它。只是要記住，並不是所有的瀏覽器都完全支持該格式。

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

你可以在此處查看實際示例：https://lyty.dev/diy/

哪些瀏覽器支持AVIF

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

 

最后

AVIF是一個游戲規則的改變者，很快就會成為世界上真正的圖像格式。由於它的潛在功能，它很可能很快就會在所有平台上獲得全面支持。

與谷歌的WebP圖像不同，蘋果花了整整10年的時間來支持，AVIF很快就引起了蘋果的興趣，以至於他們現在為這個項目做出了貢獻。

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