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

眾所周知，一圖勝千言，圖片對於視覺的沖擊效果遠大於文字。但對於我們的網際網路而言，傳輸與解析一張圖片的代價要遠比”千言”大的多的多(目前上億像素已經成為主流)。

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

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

當然，目前最值得關註的新型圖片格式是 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 產品就可以嘗試使用。

1
我們可以在 node 中這樣使用：
2

3
const sharp = require("sharp");
4
const fs = require("fs");
5

6
fs.readFile("xxx.jpeg", (err, inputBuffer) => {
7
  if (err) {
8
    console.error(err);
9
    return;
10
  }
11

12
  // WebP
13
  sharp(inputBuffer)
14
    .webp({ quality: 50, speed: 1 })
15
    .toFile("xxx.webp");
16

17
  // AVIF 轉換, 速度很慢
18
  sharp(inputBuffer)
19
    .avif({quality: 50, speed: 1})
20
    .toFile("xxx.avif");
21
});