JPG / PNG / WebP

JPG、PNG 與 WebP 圖片比較實驗台

同一張圖片,三種格式,在你的瀏覽器中實測。

靜態 JPG、PNG 或 WebP,最多 10 MB、12 百萬畫素。檔案留在本裝置上。

輸入圖片每邊最多 16,384 像素。

PNG 不使用畫質滑桿。JPEG 會用背景色填充透明區域。

三種輸出使用相同尺寸,且不會放大原圖。本實驗台將長邊限制為 1600 畫素。

選擇範例或自己的圖片,然後比較三種格式。

原始圖片

檔案更小不一定代表圖片更好。下載前,請檢查文字邊緣、漸層和透明區域。

大小變化以各結果與原檔案比較得出。如果輸出尺寸更小,其中也包含縮小尺寸帶來的變化。

如何使用此工具

  1. 1

    選擇內建原創範例,或裝置中的靜態 JPG、PNG、WebP。內建範例是產生的插畫,不是實拍照片。

  2. 2

    設定比較尺寸、JPEG/WebP 畫質與 JPEG 背景色,再執行比較。三種輸出使用相同尺寸。

  3. 3

    比較實際位元組數與預覽,下載檔案,再按最終使用尺寸檢查細節。

這裡究竟在比較什麼?

實驗台從同一來源出發,以瀏覽器編碼器產生三種格式並量測真實檔案,不展示估計節省率或固定排名。PNG 不使用有損畫質設定。JPEG 無法保留透明度,透明區域會填入選定背景色。WebP 支援情況透過實際匯出格式檢查。

這是有處理上限的比較實驗,不是完整解析度的存檔轉換器。輸入最多 10 MB、1200 萬像素;處理長邊最多 1600 像素,不放大小圖。相同尺寸有助於比較,但縮小尺寸本身也是改變。請保留原始檔案。 輸入圖片每邊最多 16,384 像素。

三種範例,觀察三類問題

漸層插畫便於觀察色帶和塊狀失真。它是刻意產生的圖像,結果不能代表所有相機照片。小字與線條範例則便於檢查邊緣雜色與模糊:如果標籤難以閱讀,檔案再小也可能不適用。

透明徽章用來檢查格式保留了什麼。先在棋盤格上觀察輪廓,再改變 JPEG 背景。JPEG 出現白色矩形是預期行為,並不代表恢復透明度。PNG 與 WebP 可保留透明通道,但有損 WebP 仍可能改變色彩細節。

可重現的比較,不是通用評分

比較時保持來源、輸出尺寸、畫質值與 JPEG 背景一致。修改設定後重新執行,再比較新產生的檔案。位元組更少不等於畫質更好,不同編碼器的相同畫質數值也不代表同等品質。

來源位元組數屬於原始檔案,輸出位元組數屬於這次匯出。已最佳化的原圖可能比所有結果都小。瀏覽器版本、編碼器與範例文字呈現都會影響數值。需要重現或檢視結果時,請記錄設定並保留下載檔案。

按照最終用途選擇下一步

表單只接受 JPG 時,應選擇可讀的 JPG,即使 WebP 更小。需要透明邊緣的標誌,可在實際背景與目標瀏覽器中比較 PNG 與 WebP。含有小字的螢幕截圖,進一步降低畫質前應先檢查可讀性。

尺寸或構圖不合適時,使用尺寸調整或裁切工具。上傳有位元組上限時,使用目標大小壓縮,並核對實際輸出是否達標。實驗台用來比較格式,不保證目標大小、JPEG 無損轉換或畫質評分。

常見問題

為什麼另一台裝置的結果不同?

瀏覽器編碼器與文字呈現可能不同。請在同一瀏覽器內,以相同來源與設定比較同一輪匯出。

實驗台會上傳圖片嗎?

不會。應用程式在瀏覽器記憶體中處理圖片,下載在本機產生;重新載入會清空實驗台狀態。

為什麼轉換後反而更大?

原始檔案可能已高效編碼。重新編碼、保留透明度或改變格式都可能增加位元組。如果新檔案沒有實際好處,可以保留原圖。

參考資料與延伸閱讀