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

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

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

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

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

注意事項(xiàng)

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

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

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

瀏覽器解決方案

Squoosh

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

特性

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

Cloudinary

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

我相信您來(lái)到這里是因?yàn)槟趯ふ乙粋€(gè)免費(fèi)且快速的轉(zhuǎn)換器。因此，瀏覽器解決方案應(yīng)該足夠了。

特性

• 沒(méi)有說(shuō)明文件大小限制
• 免費(fèi)使用

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

命令行解決方案

avif-cli

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

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

• Node.js 12.13.0

安裝軟件包：

<code>npm install avif</code>

在您的終端中運(yùn)行命令：

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

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

特性

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

您可以通過(guò)avif-cli GitHub頁(yè)面了解更多命令。

sharp

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

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

• Node.js 12.13.0

安裝軟件包：

<code>npm install sharp</code>

創(chuàng)建一個(gè)名為 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 表示圖像的路徑及其名稱和擴(kuò)展名，例如：

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

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

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

在您的終端中運(yùn)行命令：

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

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

特性

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

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

結(jié)論

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

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

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