繁體中文

您應該使用哪種圖像格式?

照片轉為 JPEG 或 WebP。螢幕截圖、標誌、圖表以及任何具有銳利邊緣或平坦顏色的內容都可以使用 PNG。如果您需要透明度和小文件,WebP 可以兼而有之。

這幾乎涵蓋了每一個決定。本頁的其餘部分解釋了原因,以便您可以判斷規則何時不適用,以及如何處理 AVIF 和 HEIC,這些瀏覽器處理的一致性比其他三個瀏覽器要差得多。

JPEG

JPEG 將圖片分成塊並丟棄您的眼睛最不可能注意到的細節。這對於照片來說非常有效,因為照片中的細節不規則且有噪音,而對於任何具​​有硬邊緣的東西則效果很差,因為被丟棄的細節正是定義邊緣的。

它在每個品質設定下都是有損的,包括最高品質設定。這裡沒有無損 JPEG 選項。它無法儲存透明度:具有透明區域的影像在變成 JPEG 時會用純色填滿。

將其用於:照片、照片掃描件、任何大部分為連續色調的圖片。避免使用它:螢幕截圖、文字、線條藝術、徽標以及稍後將再次編輯的任何內容。

巴布亞紐幾內亞

PNG 是無損的。它準確地儲存給定的像素,因此它永遠不會引入偽影,並且支援完整的 Alpha 透明度。它的壓縮利用了重複性,這就是為什麼它在平坦的顏色和銳利的邊緣上非常有效,但在照片雜訊方面效率較低。

保存為 PNG 的照片通常比保存為 JPEG 的同一張照片大幾倍,而且沒有明顯的好處。這是最常見的圖像格式錯誤,在將緩慢的頁面歸咎於其他原因之前,值得檢查一下。

將其用於:螢幕截圖、UI 擷取、徽標、圖表、圖片中包含文字的任何內容以及您想要再次編輯的圖像的任何工作副本。

網路P

在視覺品質相當的情況下,WebP 通常是這三種格式中最小的,而且它支援透明度,這使其成為涵蓋這兩種工作的一種格式。

這裡有一個重要的警告:即使品質為 100,您的瀏覽器也會以有損模式對 WebP 進行編碼。該格式確實定義了無損模式,但該工具使用的畫布 API 不會公開它。因此,從該網站匯出的 WebP 是有損匯出,並以這種方式進行描述,而不是稱為無損,因為該格式原則上支援它。

現在,瀏覽器對顯示 WebP 的支援實際上已經普及。對編碼的支援則不那麼統一,因此無法編碼 WebP 的瀏覽器會在此處報告錯誤,而不是悄悄地為您提供不同的格式。

AVIF 與 HEIC — 誠實的立場

AVIF 的壓縮效果比上述所有三種格式都要好,而且通常要好得多。 HEIC 是現代 iPhone 預設用於照片的格式。 ToolAcre Image Converter 都無法讀取兩者,這是瀏覽器限製而不是選擇。

瀏覽器通常可以顯示 AVIF,但它們沒有提供可靠的方法來解碼任意 AVIF 或 HEIC 檔案以進行處理,並且 HEIC 解碼尤其依賴並非隨處可見的平台編解碼器。接受這些文件的工具可以在某些機器上運行,但在其他機器上會失敗,因此它們會被明確拒絕。

實際結果是:在產生 HEIC 的裝置上將 HEIC 轉換為 JPEG(目前的每部手機和兩個主要桌面作業系統都可以執行此操作),然後在 JPEG 上使用瀏覽器工具。對於 AVIF,保留 JPEG 或 PNG 母版,並在發佈時使用建置工具產生 AVIF 作為輸出。

關於 GIF 的註釋

GIF 每幀限制為 256 色,對於短動畫之外的任何內容來說都是一個糟糕的選擇。影像轉換器讀取 GIF,但僅使用第一幀,且不提供 GIF 作為輸出 - 產生帶有 .gif 副檔名的靜態影像會產生誤導,而不是有幫助。

對於動畫短片,現代的答案是 MP4 或 WebM 視頻,或動畫 WebP。這些都不是這裡生產的。

工作範例:一篇文章的四個資產

一篇文章需要一張英雄照片、介面截圖、透明背景的標誌以及從電子表格匯出的圖表。

  • 英雄照片 — 預設品質的 JPEG,大小調整為顯示寬度的兩倍左右。連續音調,無需透明度。
  • 介面截圖 — PNG。它充滿了文字和硬邊,這正是 JPEG 處理最差的地方,而 PNG 可以有效地壓縮其平板。
  • 標誌 — WebP 或 PNG。兩者都保持透明度; WebP 會更小,PNG 會更精確。對於將放置在不同背景上的徽標,精確度的價值不僅僅是幾千位元組。
  • 圖表 — PNG。與螢幕截圖相同的推理:平面填充、細線和軸標籤。

結果: 四個文件,三種格式,每種格式都是根據圖片中的內容而不是習慣來選擇的。最常見的失敗模式 - 將所有四個導出為 PNG,或所有四個導出為 JPEG - 要么使照片太大數倍,要么使屏幕截圖和圖表明顯塗抹在文本周圍。

開啟工具

在 JPEG、PNG 和 WebP 之間轉換

影像轉換器在運作之前會說明轉換是否有損,並在運行後報告實際測量的尺寸。

這不包括什麼

  • ToolAcre Image Converter 讀取 JPEG、PNG、WebP 和 GIF,並寫入 JPEG、PNG 和 WebP。 HEIC、AVIF、TIFF 和相機 RAW 被拒絕。
  • 網站的 WebP 輸出是有損的,因為這是瀏覽器畫布 API 所公開的內容。
  • 畫布轉換不會保留顏色配置文件,因此具有不尋常嵌入配置文件的圖像可能會略有變化。
  • 文件大小比較取決於圖片。這裡的任何經驗法則都是衡量的起點,而不是引用的數字。