如今,網路上幾乎每張照片都採用三種格式。 JPG 三十年來一直是預設格式。 WebP 於 2010 年問世,現在每個當前瀏覽器都會顯示它。 AVIF 是三者中最新的,基於視訊編解碼器構建,通常產生最小的文件。效能審核會告訴您 "以現代格式和報價提供圖像;然後上傳表單或電子郵件用戶端將拒絕您製作的現代文件。
在它們之間進行選擇不是關於哪種格式最好,而是更多地關於圖像的去向。登陸頁面上的英雄圖像、市場列表中的產品照片以及電子郵件中附加的圖片有不同的答案。本指南比較了決定它的三個屬性:檔案大小、品質、透明度、色彩深度、動畫、編碼成本和瀏覽器外部的支援。然後它給出一個決策表並顯示如何在它們之間進行轉換。
TL;DR: 對於網站上的圖像,首先使用 AVIF,以 WebP 作為後備,以 JPG 作為最後的手段,使用
<picture>元素或伺服器協商; AVIF 通常最小,WebP 緊隨其後且編碼速度更快,JPG 隨處開啟。對於離開瀏覽器的圖像(電子郵件、上傳、列印、辦公室軟體),當透明度很重要時使用 JPG 或 PNG。要使其他程式接受的文件, AVIF 到 JPG 轉換器 webp到jpg運行客戶端,沒有上傳,免費,沒有註冊; JPG 到 WebP 和 PNG 到 WebP 則相反。
什麼是 AVIF、WebP 和 JPG?
這三種都是照片的光柵影像格式,它們的主要區別在於壓縮的年齡和設計。
JPG (JPEG) 是標準化的靜態影像方法 ITU-T 建議 T。81 1992年,它將圖片分成8x8像素塊,每個像素塊都經過離散的餘弦變換,並丟棄眼睛最少注意到的高頻細節。文件通常包裹在 JFIF 容器中 ITU-T T。871.
網路P 是 Google's 格式,現在指定於 RFC 9649. 其有損模式採用VP8視訊編解碼器的關鍵影格編碼,並具有獨立的無損模式,加上透明度和動畫。指南 webp 是什麼以及為什麼儲存的映像會顯示為。webp 深入地覆蓋它。
阿維夫 是 AV1 影像檔案格式,由開放媒體聯盟發布 AVIF 規範。 它儲存編碼為 的圖像 AV1 視訊編解碼器 在 HEIF 容器內,使用與 iPhone HEIC 照片相同的盒子結構。 AV1 是根據開放媒體聯盟的免版稅專利許可提供的,這也是瀏覽器比 HEIC 更快採用 AVIF 的原因之一。
AVIF 與 WebP 與 JPG:比較表
AVIF 在壓縮和功能方面處於領先地位,JPG 在相容性和編碼速度方面處於領先地位,WebP 幾乎在每一行都位於它們之間。
| 屬性 | 阿維夫 | 網路P | JPG |
|---|---|---|---|
| 規格 | AOMedia AVIF、AV1 編解碼器 | IETF RFC 9649 | ITU-T T。81 和 T。871 |
| 介紹 | 2019年 | 2010年 | 1992年 |
| 壓縮 | 有損或無損 | 有損或無損 | 有損 |
| 典型的照片尺寸 | 最小的 | 小的 | 三者中最大的 |
| 位深度 | 每個通道 8、10 或 12 位元 | 每個通道 8 位元 | 實際上每個通道 8 位元 |
| HDR 和寬色 | 是的 | 不 | 不 |
| 透明度 | 完整的阿爾法 | 完整的阿爾法 | 沒有 |
| 動畫 | 圖像序列 | 是的 | 不 |
| 編碼速度 | 速度慢,CPU 重,工作量大 | 中等 | 快 |
| 瀏覽器顯示 | Chrome 85、Firefox 93、Safari 16、Edge 121 及更高版本 | 所有目前瀏覽器 | 通用 |
| 桌面應用程式、電子郵件、上傳表格 | 最弱 | 斑駁的 | 通用 |
| 最佳用途 | 位元組最重要的最大網路映像 | 一般網路影像,廣泛的後備 | 任何離開瀏覽器的東西 |
讓人們驚訝的行是編碼速度。 AVIF'小檔案來自編碼器,該編碼器會努力搜尋對每個區塊進行編碼的最佳方式,並且搜尋需要時間。在幾分鐘內將數千個產品映像轉換為 WebP 的建置步驟對於 AVIF 來說可能需要更長的時間才能以高努力設定完成。對於編碼一次並服務數百萬次的網站,交易通常是值得的。對於根據請求動態產生的圖像,可能不是。
哪種格式可以產生最小的檔案?
AVIF 通常以相似的視覺品質製作最小的文件,WebP 是下一個,JPG 是最大的。間隙的大小在很大程度上取決於影像和編碼器設定。
對於 WebP,有一個已發布的參考點:Google's WebP 概述 報告有損 WebP 檔案在同等 SSIM 品質下比同類 JPEG 小 25% 至 34%,無損 WebP 比 PNG 小 26%。 AVIF 通常會再次改進 WebP 的照片,在平滑梯度、天空和皮膚上獲得最大的增益,其中 JPEG's 8x8 區塊首先顯示。
三個警告使這些數字保持誠實。
- 不同格式的品質數字不符。 品質為 80 的 JPG、品質為 80 的 WebP 和品質為 80 的 AVIF 的視覺品質不同,相同格式的不同編碼器也不同。透過查看文件或 SSIM 等指標來比較文件,而不是透過滑桿值。
- 低細節影像保存更少。 平面插圖或已經嚴重壓縮的 JPEG 幾乎沒有什麼可擠壓的了。
- 重新編碼有損檔案堆疊損失。 將 JPG 轉換為 AVIF 或 WebP 從已經遺失細節的圖片開始。盡可能從原始相機檔案、PNG 或高品質主控進行編碼。
格式選擇對頁面重量有多重要?
它在圖像較重的頁面上最為重要,因為圖像通常是訪客下載內容的最大份額。算術很簡單。目錄頁面包含 40 張產品照片,每張照片容量約為 400 KB,其中包含 16 MB 的 JPG 影像。在 WebP 的 Google 報告節省 25% 至 34% 時,同一組內容大約在 10.5 至 12 MB 之間。 AVIF 通常會進一步修剪。
在快速桌面連接上,差異不大。在行動網路速度較慢的手機上,快速結算的頁面與訪客放棄的頁面之間的差距為幾兆字節,頁面頂部附近的圖像直接輸入最大可見元素呈現的速度。
格式不是唯一的槓桿,通常也不是最大的槓桿。將 4000 px 寬的照片傳送到 400 px 插槽比選擇 WebP 而不是 AVIF 浪費更多的位元組。首先調整大小至顯示的大小,提供 srcset 不同螢幕的變體,折疊下方的惰性載入圖像,然後選擇格式。以另一種順序執行此操作可以優化錯誤的事情。
它們的品質和工藝品有何不同?
當推到小尺寸時,每種格式都會以自己的方式失敗,了解失敗可以幫助您選擇。
JPG 分解成可見的 8x8 塊和 "振鈴&報價;鋒利邊緣(例如照片上的文字)周圍有微弱的漣漪。 WebP'有損模式會軟化細節,並且由於它以半解析度儲存顏色,因此可能會在細紅色或藍色線條周圍留下彩色條紋。 AVIF 往往會模糊細紋理而不是塊狀,因此嚴重壓縮的 AVIF 看起來光滑且略帶蠟狀,這在照片中不太令人反感,而在織物、頭髮和樹葉中更明顯。
對於具有硬邊、平面顏色和文字的圖形,沒有一種有損模式是理想的。 PNG 或無損 WebP 保持邊緣精確。
載入行為也不同。 T。81 為 JPEG 定義了一種漸進模式,其中整個影像的模糊版本首先出現,並隨著更多資料的到達而銳化,因此即使在完成之前,大型漸進式 JPG 在緩慢的連接上也會感覺很快。通常提供的 WebP 和 AVIF 僅在足夠多的檔案到達後才繪製,而它們較小的大小通常可以彌補這一點。在連接不良的非常大的英雄圖像上,這種差異是可見的,這是在選擇格式之前調整大小的另一個原因。
PNG 和 GIF 適合哪裡?
兩者都不是照片格式,也不與上述三種格式直接競爭。 PNG,定義於 W3C PNG 規格,是無損的:螢幕截圖、圖表、徽標和編輯母版的正確選擇,照片的正確選擇,它儲存的照片大小是 JPG 的幾倍。 GIF 每幀限制為 256 種顏色,主要用於不會播放任何新內容的短片動畫。
在網站上,兩者通常最好用作 WebP 或 AVIF:對於 PNG 風格的圖形,無損或高品質有損;對於 GIF 風格的剪輯,動畫 WebP。在瀏覽器之外,PNG 仍然是任何透明內容的安全格式,因為 JPG 無法保存它。
哪種格式支援透明度、HDR 和動畫?
AVIF 支援這三者,WebP 支援透明度和動畫,但不支援 HDR,JPG 不支援其中任何一個。
透明度。 AVIF 將 alpha 儲存為輔助影像,WebP 在有損和無損模式下都有 alpha 通道。任一都可以將具有軟邊的產品切口保持在 PNG' 的幾分之一;s 大小。 JPG 沒有透明度,因此任何透明區域在轉換為純色時都必須填充純色。
HDR 和寬色。 AVIF 每個通道可以使用 10 或 12 位,這是最近手機和相機的 HDR 照片所需要的,以避免在明亮的天空中出現條帶。 WebP 和 JPG 是 8 位元的。
動畫。 WebP 動畫被廣泛用作 GIF 的較小替代品。 AVIF 定義影像序列,但瀏覽器外部軟體對動畫 AVIF 的支援較薄。
每種格式仍然失敗在哪裡?
目前瀏覽器內部的所有三個瀏覽器都得到了支援。其他地方的支援是選擇所在的地方。
從版本 85 開始的 Chrome、從 93 開始的 Firefox、從 16 開始的 Safari 和從 121 開始的 Edge 中顯示 AVIF。較舊的瀏覽器、較舊的作業系統照片檢視器、許多辦公室套件以及一長串上傳表單不接受它。從網頁保存 AVIF 並將其放入簡報中是典型的失敗。
WebP 更進一步。目前的每個瀏覽器都會顯示它,大多數現代作業系統都會打開它,但一些電子郵件用戶端、列印服務和較舊的桌面軟體仍然拒絕它。
JPG 基本上可以在每個裝置、應用程式和表單上開啟。這就是為什麼它對於您無法控制其目的地的任何圖像來說仍然是正確的格式。
您應該使用哪種格式?決策表
首先決定目的地,然後決定內容。
| 情況 | 使用 | 為什麼 |
|---|---|---|
| 您自己網站上的英雄和產品圖像 | AVIF,具有 WebP 和 JPG 後備功能 | 最重影像上的最小位元組 |
| 一般網站圖像,簡單的管道 | WebP,具有 JPG 後備功能 | 近乎通用的瀏覽器支持,編碼速度快 |
| 根據請求產生的圖像 | WebP 或 JPG | AVIF 編碼成本增加了延遲 |
| 具有 HDR 或寬色的照片 | 阿維夫 | 三個中只有 10 位元和 12 位元之一 |
| 網路上的透明圖形 | AVIF 或 WebP | Alpha 的大小僅為 PNG's 大小 |
| 電子郵件附件 | JPG | 每個客戶都打開它 |
| 上傳表格、市場、ID 入口網站 | JPG | 允許清單很少包括 AVIF 或 WebP |
| 印刷和辦公室文件 | JPG 或 PNG 用於圖形 | 軟體支援 |
| 編輯母版和檔案 | 原始格式、PNG 或 TIFF | 避免重複有損編碼 |
模式很簡單:現代格式的交付,JPG 的交換,無損的母帶。
如何透過 JPG 後備功能為 AVIF 和 WebP 提供服務?
使用 <picture> 元素。瀏覽器行走 <source> 按順序列出並採用它支援的第一個類型,然後回退到 <img>,如所定義 WHATWG HTML picture 元素:
<picture>
<source srcset="hero-1600.avif" type="image/avif">
<source srcset="hero-1600.webp" type="image/webp">
<img src="hero-1600.jpg" width="1600" height="900" alt="Mountain lake at sunrise">
</picture>
支援 AVIF 的瀏覽器僅下載 AVIF。沒有 AVIF 但有 WebP 的一個會下載 WebP,其他所有內容都會取得 JPG。沒有格式下載兩次。
另一種選擇是伺服器端協商:瀏覽器發送一個 Accept 標頭等 image/avif,image/webp,*/*,伺服器或 CDN 從單一 URL 傳回其擁有的最佳格式。這使得標記變得簡單,但要求快取在該標頭上發生變化,如 HTTP' 中所述;s 中的內容協商規則 RFC 9110.
為了在建置步驟中產生三個版本,Node。js 庫銳利地寫入了所有這些版本:
import sharp from 'sharp'
const input = sharp('hero-master.png').resize(1600)
await input.clone().avif({ quality: 50 }).toFile('hero-1600.avif')
await input.clone().webp({ quality: 80 }).toFile('hero-1600.webp')
await input.clone().jpeg({ quality: 82, mozjpeg: true }).toFile('hero-1600.jpg')
品質值故意有所不同,因為不同格式的尺度並不對應。在確定數字之前目視檢查輸出。
如何在不上傳的情況下在 AVIF、WebP 和 JPG 之間轉換?
使用客戶端轉換器,它可以對瀏覽器標籤內的圖像進行解碼和重新編碼,以便文件永遠不會離開您的裝置。 Toolz 轉換器按方向分開。
從 AVIF 到其他程式接受的東西。 的 AVIF 到 JPG 轉換器 是從文件或表格拒絕的網站保存的 AVIF 的修復程式。透明區域填滿白色,結果下方的註釋如此表示。品質滑桿從 10 運行到 100,從 90 開始。當影像具有必須保存的透明背景時, 將 AVIF 轉換為 PNG 相反,它保持 alpha 通道並無損地儲存解碼的像素。
解碼AVIF使用瀏覽器'擁有自己的 AVIF 解碼器,因此轉換器需要一個顯示 AVIF:Chrome、Edge、Firefox 或 Safari 16 及更高版本的瀏覽器。如果瀏覽器無法開啟文件,則行會這樣說。動畫 AVIF 被讀取為靜態影像。
從 WebP 到 JPG。 出於同樣的原因, WebP 到 JPG 將下載的。webp 轉換為到處開啟的文件,並使用相同的白色填充以提高透明度。
從 JPG 和 PNG 到 WebP。 走另一條路, JPG 到 WebP 縮小照片以供發布,並且 PNG 到 WebP 在保留 alpha 通道的同時,對螢幕截圖和透明圖形執行相同的操作。編碼使用瀏覽器's 畫布編碼器。 Current Chrome、Edge 和 Firefox 可以寫入 WebP;無法取得明確錯誤的瀏覽器,而不是 PNG 更名為 。webp。
轉換器不做什麼。 Toolz 讀取 AVIF 但不寫入它,因為瀏覽器無法可靠地將 AVIF 編碼器暴露到網頁上。要產生 AVIF 文件,請使用建置工具,例如上面的尖銳範例。這 影像轉換器 接受JPG、JFIF、PNG、WebP、AVIF、GIF、BMP、ICO、HEIC、TIFF、PSD、SVG、CR2、DNG 和PDF,並編寫JPG、PNG、WebP、GIF、ICO、PDF 和SVG,涵蓋混合批次。
每次轉換都是透過畫布繪製的,因此 EXIF 資料、GPS 座標和顏色設定檔不會複製到輸出中。超過 10000 萬像素的圖像會被訊息拒絕,而不是使選項卡崩潰。這些工具是免費的,無需註冊,並且有每日轉換限制。
AVIF、WebP 和 JPG 之間的轉換是否會失去品質?
轉換為有損格式每次都會失去一些細節,而轉換為無損格式則不會再失去任何細節。方向決定哪個適用。
| 轉換 | 有損步? | 什麼變化 |
|---|---|---|
| AVIF 至 JPG | 是的 | 第二個有損編碼;透明度充滿白色;文件通常較大 |
| AVIF 到巴布亞紐幾內亞 | 不 | 解碼像素保持準確;保持透明度;文件大得多 |
| WebP 到 JPG | 是的 | 第二個有損編碼;透明充滿白色 |
| JPG 到 WebP | 是的 | JPEG' 之上的第二個有損編碼;s;文件通常較小 |
| PNG 到 WebP | 通常,帶有有損 WebP | 保持透明度;文件通常要小得多 |
| 其中任何一個都到 AVIF | 是的,在典型用途中 | 最小的文件;最慢的編碼 |
接下來是兩個實際後果。經過多次有損轉換的檔案每一步都會稍微降級,因此請避免往返,例如 JPG 到 WebP 到 JPG。轉換後的檔案的大小並不能說明其品質:轉換為 JPG 的 AVIF 會變大而不會變得更好,因為 JPG 編碼器會花費更多位元組來描述相同的已壓縮圖片。
在品質設定在 90 左右時,在普通照片中很難看到單一的額外有損步驟。重複轉換、低品質設定或具有精細文字和銳利邊緣的影像會使損失變得可見。
為什麼贏得 #39;保存的 AVIF 或 WebP 打開?
開啟它的程式沒有該格式的解碼器。目前的瀏覽器會顯示圖像,因為它與伺服器協商了該格式,但磁碟上的檔案隨後被交給具有較舊或更窄格式清單的軟體:辦公室套件、較舊的照片檢視器、電子郵件用戶端或上傳表格'允許列表。
將檔案重命名為 .jpg 沒有幫助。位元組仍然以 AVIF 開頭 ftyp 盒子或 WebP RIFF 標頭,以及期待 JPEG 的程式找不到 JPEG 資料。轉換檔案是修復程序,也值得檢查網站是否提供直接下載鏈接,有時提供原始 JPG 或 PNG 而不是協商版本。
JPG已經過時了嗎?
不,JPG 僅作為網站應發送到當前瀏覽器的格式而已過時,即使在那裡,它仍然是每個瀏覽器的後備 <picture> 元素。作為一種交換格式,對於電子郵件、表格、列印、辦公室文件以及任何指向您無法控制的軟體的內容,它仍然是正確的預設格式,AVIF 和 WebP 都沒有取代它。
同樣的邏輯也適用於其他讓瀏覽器外的人感到困惑的格式。 iPhone照片是HEIC,AVIF的兄弟,在同一HEIF容器中,以及比較 HEIC 與 JPG 解釋為什麼這些檔案無法在 Windows 上開啟。每個影像轉換器都列在 圖像工具集線器.
