使用 AVIF 圖片格式

文字須要翻譯，圖片不用。在圖片的世界，無論是中國人、印度人、美國人、英國人的笑，全世界的人都能明白那是在笑。圖片所承載的情感是全球通明的。

衆所周知，一圖勝千言，圖片對於視覺的衝擊效果遠大於文字。但對於咱們的互聯網而言，傳輸與解析一張圖片的代價要遠比"千言"大的多的多(目前上億像素已經成爲主流)。

面對動輒 10 多 M 的大型圖片，使用優化的圖像來節省帶寬和加載時間無疑是性能優化中的重頭戲，不管對於用戶仍是公司都有巨大的意義。由於對於用戶來講，能夠更早的看到圖片，對於公司而言，更加省錢。

在不使用用戶提供的圖片時，最簡單就能夠使用 tinypng 網站針對各個圖片進行圖像壓縮與優化。在減小了近 50% 大小的同時作到了肉眼沒法區分，收益是很是大的。

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 產品就能夠嘗試使用。

使用 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 也可讓用戶更快的獲取圖片。

鼓勵一下

若是你以爲這篇文章不錯，但願能夠給與我一些鼓勵，在個人 github 博客下幫忙 star 一下。
博客地址

參考資料

node-avif

tinypng

Sharp