AVIF (AV1圖像文件格式)是一種現(xiàn)代圖像文件格式規(guī)范，用于存儲圖像，與JPG、JPEG、PNG和WebP等其他格式相比，它可以顯著減小文件大小。 AVIF規(guī)范1.0.0版于2019年2月最終確定，并由開放媒體聯(lián)盟發(fā)布。

與JPG相比，它可以節(jié)省50%的文件大小，與WebP相比，它可以節(jié)省20%的文件大小，同時保持圖像質(zhì)量。

本文將介紹一些基于瀏覽器的工具和命令行工具，用于創(chuàng)建AVIF圖像。

為什么選擇AVIF而不是JPG、PNG、WebP和GIF？

• 無損壓縮和有損壓縮
• JPEG存在嚴重的色帶現(xiàn)象
• WebP更好，但與AVIF相比，仍然存在明顯的塊狀感
• 多種色彩空間
• 8、10、12位色深

注意事項

幾年前，Jake Archibald撰寫了一篇關(guān)于這種新型圖像格式的文章，并幫助我們識別了一些壓縮圖像的缺點，通常在壓縮到AVIF時，您應(yīng)該注意以下兩點：

1. 如果用戶在頁面的上下文中查看圖像，并且由于壓縮而顯得難看，那么這種壓縮級別是不可接受的。但是，略高于該界限一點是可以的。
2. 與原始圖像相比，圖像丟失明顯的細節(jié)是可以接受的，除非該細節(jié)對圖像的上下文很重要。

另請參閱：Addy Osmani在Smashing Magazine上深入探討了使用AVIF和WebP。

瀏覽器解決方案

Squoosh

Squoosh是一款流行的圖像壓縮網(wǎng)絡(luò)應(yīng)用程序，允許您將多種格式的圖像轉(zhuǎn)換為其他廣泛使用的壓縮格式，包括AVIF。

特性

• 文件大小限制：4MB
• 圖像優(yōu)化設(shè)置（位于右側(cè)）
• 下載控件 – 這包括查看結(jié)果文件的大小以及與原始圖像相比的減小百分比
• 免費使用

Cloudinary

Cloudinary的免費圖像到AVIF轉(zhuǎn)換器是另一個不需要任何代碼的圖像工具。您只需上傳選定的圖像（PNG、JPG、GIF等），它就會返回壓縮版本。其API除了創(chuàng)建AVIF圖像外，還具有圖像增強和人工生成圖像填充等更多功能。

我相信您來到這里是因為您正在尋找一個免費且快速的轉(zhuǎn)換器。因此，瀏覽器解決方案應(yīng)該足夠了。

特性

• 沒有說明文件大小限制
• 免費使用

您可以在Cloudinary AVIF轉(zhuǎn)換器常見問題解答中找到常見問題的答案。

命令行解決方案

avif-cli

lovelll 的 avif-cli 允許您獲取存儲在文件夾中的圖像（PNG、JPEG等），并將其轉(zhuǎn)換為指定縮減大小的AVIF圖像。

以下是要求以及您需要執(zhí)行的操作：

• Node.js 12.13.0

安裝軟件包：

<code>npm install avif</code>

在您的終端中運行命令：

<code>npx avif --input="./imgs/*" --output="./output/" --verbose</code>

• ./imgs/* – 表示所有圖像文件的位置
• ./output/ – 表示輸出文件夾的位置

特性

• 可以設(shè)置轉(zhuǎn)換速度

您可以通過avif-cli GitHub頁面了解更多命令。

sharp

sharp是另一個有用的工具，用于將常見格式的大圖像轉(zhuǎn)換為更小、更適合網(wǎng)絡(luò)的AVIF圖像。

以下是要求以及您需要執(zhí)行的操作：

• Node.js 12.13.0

安裝軟件包：

<code>npm install sharp</code>

創(chuàng)建一個名為 sharp-example.js 的JavaScript文件并復(fù)制此代碼：

const sharp = require('sharp')

const convertToAVIF = () => {
    sharp('path_to_image')
    .toFormat('avif', {palette: true})
    .toFile(__dirname + 'path_to_output_image')
}

convertToAVIF()

其中 path_to_image 表示圖像的路徑及其名稱和擴展名，例如：

<code>./imgs/example.jpg</code>

而 path_to_output_image 表示您希望圖像存儲的路徑及其名稱和新擴展名，例如：

<code>/sharp-compressed/compressed-example.avif</code>

在您的終端中運行命令：

<code>node sharp-example.js</code>

就是這樣！您應(yīng)該在輸出位置有一個壓縮的AVIF文件！

特性

• 免費使用
• 使用sharp可以旋轉(zhuǎn)、模糊、調(diào)整大小、裁剪、縮放圖像等等

另請參閱：Stanley Ulili關(guān)于如何使用Sharp在Node.js中處理圖像的文章。

結(jié)論

AVIF是一項前端開發(fā)人員應(yīng)該考慮在其項目中使用的技術(shù)。這些工具允許您將現(xiàn)有的JPEG和PNG圖像轉(zhuǎn)換為AVIF格式。但是，與在您的工作流程中采用任何新工具一樣，需要根據(jù)您的特定用例正確評估其優(yōu)點和缺點。

我希望您像我一樣喜歡閱讀這篇文章。非常感謝您的時間，祝您度過愉快的一天！

以上是創(chuàng)建AVIF圖像的有用工具的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！