圖片與文件
照片、價目表、透明圖:JPG、PNG、WebP 的選擇方法
照片可先試 JPG/WebP,價目表以原 PNG 核對小字,透明標記要用能保留透明的格式。用三份示例比較實際容量,並檢查轉檔後透明處是否變成白底,附原檔與轉好的圖片。
先按用途選格式,再看容量
照片可以先試 JPG 或 WebP。價目表有小字與細線,我會保留原 PNG,拿轉好的檔案逐項核對。標記要透出公告底色,就用 PNG 或支援透明的 WebP。收件系統只接受某種格式時,仍得依規定交件。自己的瀏覽器開得了,不代表對方的表單會收。
假設你替社區二手市集準備一張杯子照片、一張價目表和「二手好物」標記。照片要看清物品,價目表要讀對數字,標記則不該帶白框蓋住彩色公告。它們都是圖片,檢查重點卻不同,不能只挑檔案最小的那份。
市集、品項和價格是自擬情境。杯子圖沿用前篇示例,價目表與標記只用來比較格式。
- 圖片壓縮本文的 JPG 與 WebP 結果使用這個工具實際下載。
照片先固定寬高,才看格式差異
杯子照片有曲面、陰影和布紋,可先輸出 JPG、WebP,比較需要的細節與容量。PNG 能保存透明與像素資料,也不代表每張照片都該用它交付。原始檔留著作來源,傳送版本則按這次用途選擇。
比較格式時,寬高要一致。一張是 800 像素,另一張是原尺寸,容量差就不能全部算在格式上。JPG 和 WebP 都填品質 80,也只代表設定數字相同,畫質不一定相同,更不等於保留八成細節。
先放進預定版面,再放大看杯緣與桌巾紋理。要確認商品刮痕,就給看得清楚的真實近照;換格式無法補出原圖沒拍到的細節,模糊 JPG 改存 PNG 也找不回先前丟失的資訊。
- 縮小圖片尺寸與降低品質的差異如果問題是容量上限,可接著比較尺寸與品質的取捨。
價目表要讀對 80 與 180
白底黑字與表格細線周圍的細碎痕跡,在縮小預覽中可能不明顯,讀小字時卻會造成干擾。示例的 NT$ 80 和 NT$ 180 只差一個數字,要逐項看清楚,不能只說整張表差不多。
留下原 PNG,把 JPG、WebP 以相同顯示寬度開啟,核對數字、斜線和底部小字。放進通知後也看一次,免得整張表被縮得太窄。格式合適,文字太小,收件人仍然讀不清。
WebP 有有損與無損編碼,副檔名 .webp 不能證明圖片沒變。本站壓縮工具有品質設定,沒有獨立「無損 WebP」開關,品質 100 也不能當成無損保證。要有核對依據,就另存原 PNG。

- 查看價目表 JPG同尺寸、品質 80,30,499 bytes。
- 查看價目表 WebP同尺寸、品質 80,17,688 bytes。
用本站轉成 JPG,透明處會變成白底
公告是米黃色,PNG 或 WebP 的透明區能讓底色透出;一般 JPG 沒有透明通道,必須把透明處合成某種背景。本站輸出 JPG 會先鋪白色,所以標記換成 JPG 後,在彩色公告上就會出現白底。
不要只在白色頁面上看結果。把原 PNG、JPG 和 WebP 放在同一個有顏色的背景,觀察四周和邊緣,半透明陰影也要檢查,才知道這次輸出是否符合需求。只看正中央實心圖案,容易漏掉白底。
已經合成白底的 JPG 改存 PNG,不會自動變回透明,因為這份檔案裡已沒有原透明資訊。要保留透明背景,得回到原透明檔,再選能保留透明、收件人也接受的格式輸出。

- 原透明標記 PNG320 × 241,11,637 bytes。
- 透明標記 JPG 結果品質 80,7,571 bytes;透明處已合成白色。
- 透明標記 WebP 結果品質 80,6,080 bytes;本次角落透明值為 0。
實際容量對照:這張價目表轉 JPG 反而更大
這組示例於 2026 年 9 月 27 日用 Chrome 151.0.7922.34,將三份原 PNG 分別放進本站工具,維持各自原尺寸、品質 80,下載 JPG 和 WebP。每次從原 PNG 開始,沒有重壓上一份結果。下表記的是當時實際下載 bytes,不是預估容量。
價目表原 PNG 是 26,073 bytes,JPG 卻是 30,499 bytes。以文字和細線為主的截圖,不能套用轉 JPG 就變小的想法。本次三份 WebP 都比同組 JPG 小,但不能推成所有圖片的固定排名,也不能拿容量單獨判定畫質。
透明標記的 JPG 角落是不透明白色,WebP 同一角落透明值為 0,與背景比較圖一致。這只確認當次角落是否透明,不代表所有像素都與原圖相同。圖片、瀏覽器或編碼器換了,大小與細節也可能改變。
| 素材 | 尺寸 | 原 PNG | JPG | WebP |
|---|---|---|---|---|
| 杯子圖 | 1536 × 1024 | 2,885,100 | 282,353 | 226,220 |
| 價目表截圖 | 720 × 482 | 26,073 | 30,499 | 17,688 |
| 透明標記 | 320 × 241 | 11,637 | 7,571 | 6,080 |
工具只輸出 JPG、WebP,交件前還要重開
本站圖片壓縮讀取靜態 JPG、PNG、WebP,輸出為 JPG 或 WebP,沒有 PNG 匯出,也不支援把動畫當成靜態圖片批次處理。必須交 PNG 時,保留來源程式的 PNG 輸出,不必為了用壓縮工具多轉一次。
下載後重開檔案,核對寬高、文字與背景,再對照收件規格。只接受 JPG,就交已確認的 JPG;需要透明圖卻只有 JPG 上傳欄位,先問清楚要的是透明素材,還是排好背景的完整公告。把 .webp 改名成 .jpg,並不會轉換編碼。
價目表原稿、群組通知圖和公告標記按用途分開存,原檔也留一份。下次改價格就回價目表原稿,換底色就回原透明圖,不要繼續加工同一張已壓縮的圖片。
參考來源
- MDN 圖片格式指南各格式的影像與透明支援;接收端規定仍須另外確認。
- MDN:Canvas 圖片輸出品質參數與實際輸出格式的說明。