AVIF 介紹
當然，目前最值得關注的新型圖片格式是 AVIF（AV1 Image File Format，AV1圖像文件格式，是業界最新的開源視頻編碼格式AV1的關鍵幀衍生而來的一種新的圖像格式。AVIF 來自於 Netflix(著名的流媒體影視公司), 在 2020 年情人節公布。
當遇到新的技術時候，我們總是要考慮兼容問題，話不多說，我們打開 caniuse 。
就這？就這？是的，雖然當前的瀏覽器支持情況堪憂，但是開發者為了瀏覽器提供了 4kb 的 polyfill:
在使用 avif 后，我們可以使用的瀏覽器版本:
- Chrome 57+
- Firefox 53+
- Edge 17+
- Safari 11+
該格式的優勢在於:
- 權威
AVIF 圖片格式由開源組織 AOMedia 開發，Netflix、Google 與 Apple 均是該組織的成員, 所以該格式的未來也是非常明朗的。 - 壓縮能力強
在對比中發現 AVIF 圖片格式壓縮很棒，基本上大小比 JPEG 小 10 倍左右且具有相同的圖像質量。 - polyfill
面對之前瀏覽器無力情況提供 polyfill，為當前狀況下提供了可用性
如果是技術性網站或某些 Saas 產品就可以嘗試使用。
https://www.98891.com/article-41-1.html
使用 Sharp 生成 AVIF
Sharp 是一個轉換格式的 node 工具庫, 最近該庫提供了對 AVIF 的支持。
我們可以在 node 中這樣使用：
const sharp = require("sharp"); const fs = require("fs"); fs.readFile("xxx.jpeg", (err, inputBuffer) => { if (err) { console.error(err); return; } // WebP sharp(inputBuffer) .webp({ quality: 50, speed: 1 }) .toFile("xxx.webp"); // AVIF 轉換, 速度很慢 sharp(inputBuffer) .avif({quality: 50, speed: 1}) .toFile("xxx.avif"); });在后端傳入 jpg,png 等通用格式，這樣我們便可以在瀏覽器中直接使用 AVIF。
雖然 AVIF 是面向未來的圖片格式，但是就目前來說，在開發需要大量圖片的業務時，使用專業的 OSS 服務和 CDN 才是更好的選擇。
由於 OSS 服務支持jpg、png、bmp、gif、webp、tiff等格式的轉換，以及縮略圖、剪裁、水印、縮放等多種操作，這樣就可以更簡單的根據不同設備(分辨率)提供不同的圖片。同時 CDN 也可以讓用戶更快的獲取圖片。