本文首發於微信公眾號：大遷世界, 我的微信：qq449245884，我會第一時間和你分享前端行業趨勢，學習途徑等等。
更多開源作品請看 GitHub https://github.com/qq449245884/xiaozhi ，包含一線大廠面試完整考點、資料以及我的系列文章。
AV1影像檔案格式（AVIF）是基於開源AV1影片編解碼器的編碼格式。與WebP相比，AVIF更加新穎，在Chrome和Opera僅於2020年支援，Firefox於2021年支援，Safari於2022年支援。與WebP一樣，AVIF旨在解決網路上光柵影像的每一個可想象的用例：類似GIF的動畫、類似PNG的透明度，以及在檔案大小比JPEG或WebP更小的情況下提高感知質量。
到目前為止，AVIF顯示出了很大的潛力。由AV1編解碼器開發的Alliance for Open Media的創始成員Netflix開發的測試框架顯示，與JPEG或WebP相比，AVIF的檔案大小顯著減小。Cloudinary和Chrome編解碼器團隊的其他研究也對其進行了積極的評估，與當前的編碼標準相比更加優秀。
儘管工具有限，你仍然可以開始嘗試使用AVIF，因為它是Squoosh提供的編碼之一：
瀏覽器支援
如果你想知道為什麼我們花費了這麼多的時間討論JPEG，而AVIF和WebP可以為我們提供更高質量的結果和更小的檔案大小，那是因為它們——以及任何新的影像編碼——都有一個主要的問題。GIF、PNG和JPEG的支援在所有瀏覽器中都是保證的，已經有幾十年了。與這些傳統的影像格式相比，AVIF是全新的，雖然WebP在現代瀏覽器中的支援非常好，但在整個網路上並不是一個常見的格式。
可以想象，開發旨在提高質量和傳輸大小的新影像格式所花費的時間和精力是巨大的。像WebP、AVIF和JPEG XL（沒有在任何瀏覽器中支援）這樣的格式旨在成為網路上光柵影像的統一解決方案，就像SVG對於向量圖形一樣。而其他格式，比如JPEG 2000（僅在Safari中支援），旨在滿足與基本的JPEG相同的用例，但改進了壓縮方法以提供外觀相似但更小的影像。
雖然其中一些較新的格式使用了JPEG名稱，但它們的編碼方式與JavaScript與Java本質上不同。如果瀏覽器不支援特定編碼方式，則將無法解析該影像檔案，就好像我要求你使用你不理解的語言來填寫畫素格紙一樣。瀏覽器將請求影像資料，嘗試解析它，但失敗後將丟棄它而不渲染任何內容。在現代瀏覽器之外無法渲染的影像源將是我們內容和整個網路的重大故障點——對於世界各地的大量使用者而言，這是一張損壞的影像和浪費的頻寬。為了追求更高效能，不應該犧牲更健壯的網路。
長期以來，我們一心只用的<img>使得無論多有前途的新影像格式都極難使用。請記住，<img>只支援單個原始檔，並且經過高度最佳化以快速傳輸該檔案——實際上，我們無法透過JavaScript攔截該請求。直到最近，唯一可行的選擇是向所有使用者提供全新型別的影像，並在瀏覽器觸發錯誤時請求“遺留”格式之一——在第一個檔案傳輸之後，產生第二個檔案傳輸。
因此，<img>必須發生變化，就像幾十年來一直存在的那樣。
程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
原文：https://web.dev/learn/images/...
交流
有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。
