WebP、JPEG 與 PNG 怎麼選：用內容決定格式與壓縮

一張料理照片、一張透明背景插圖和一張步驟表，雖然都能放進網頁，適合的輸出方式卻不同。把它們全部存成同一格式，或一律調到很低的品質，可能讓檔案還是偏大，也可能先破壞讀者需要看的細節。

以下以原創料理筆記頁規劃為例，依 2026 年 9 月 14 日查閱的官方格式與網頁文件整理。尺寸算式用來解釋概念，沒有實際拍攝料理、進行平台速度測試，或宣稱某個壓縮服務一定能節省固定比例。

先分清像素、顯示尺寸與檔案大小

像素尺寸描述圖片有多寬、多高；檔案大小則是儲存與傳送需要多少資料。兩張同樣寬高的圖片，因畫面細節、格式、透明度及編碼設定不同，可能產生不同檔案大小。不能只看到像素相同，就認為兩張圖片載入成本相同。

例如原創尺寸練習把 1600 × 900 的圖片縮成 800 × 450，寬和高都減半，像素總數從 1,440,000 變成 360,000，也就是原來四分之一。但壓縮後檔案不一定剛好變四分之一，因為格式和畫面內容仍會影響結果。

網站顯示寬度又是另一回事。高密度螢幕可能需要比 CSS 顯示寬度更多的圖片像素；因此別只照手機畫面看起來的寬度輸出唯一版本。先確認版面與裝置需求，再讓網站提供適合的候選尺寸，避免用超大原圖服務所有位置。

照片、透明圖與文字圖分別選格式

JPEG 常用於照片等色彩變化多的靜態畫面，採有損壓縮，常見網頁 JPEG 不提供透明通道。料理成品照可把 JPEG 列為候選，但若圖片有細小文字或銳利邊線，要仔細檢查是否出現模糊與方塊，不只看整張縮圖。

PNG 支援無損壓縮與透明度，適合需要保留清楚邊緣或透明背景的點陣內容。它並不是沒有壓縮，只是壓縮方式不以丟失像素資訊為目標。把已經模糊的 JPEG 另存成 PNG，也不會把先前失去的細節還原。

WebP 同時支援有損、無損與透明度，也可用於動畫；目前主要瀏覽器已有支援，但仍要檢查上傳平台和下游工具。若步驟圖本來就是向量形狀與文字，可另評估 SVG；照片包進 SVG 並不會因此成為真正的向量圖。

比較品質時，先固定同一份原稿

從保留的原始圖片輸出候選檔，使用相同裁切、尺寸和內容，再比較格式與品質設定。若一張改了尺寸、一張另外銳化，差異就不能全歸因於格式。料理筆記可以分別檢查盤緣、葉片紋理、陰影漸層與圖片上的小字。

不同格式或工具的品質數字不一定具有相同意義。某工具的品質 80，不能直接解讀成比另一工具的 75 更好，也不是保留原圖資訊百分比。從合理的候選設定開始，逐步調整並記下檔案大小與可見差異，比追求通用最佳數字更實用。

無損壓縮保留的是該次輸入的像素資訊，不代表之前沒有縮放或有損處理。反覆把已壓縮的圖片再編碼，可能累積不必要的損失；需要改版時，回到原稿重新輸出。原始素材、編輯檔與網站成品應有清楚檔名，避免誤覆蓋。

用固定順序完成一次輸出比較

先決定圖片的目的：料理照是看整體擺盤，還是必須看清食材切法；步驟表則要保留可讀文字。用途不同，能接受的細節差異就不同。若文章需要辨識細小資訊，應提供合適的放大方式或文字說明，而不是只把檔案壓到更小。

輸出後同時查看實際顯示尺寸和放大細節。前者反映一般閱讀感受，後者用來找出模糊、色帶、透明邊緣或壓縮痕跡。透明圖片也要放到深色與淺色背景，確認沒有不預期的白邊、黑邊或背景被填滿。

記錄候選檔的寬高、格式、設定與檔案大小，選擇能滿足閱讀需要的較精簡版本。這是同一用途下的比較，不能用一張料理照結果替所有照片、截圖與圖示下結論。若格式轉換後反而變大，就回查內容與設定，不必勉強採用。

1. 複製保留原稿，確認使用權、裁切及圖片用途。
2. 依版面決定候選尺寸，選擇符合透明度與內容的格式。
3. 從同一原稿輸出，查看文字、邊緣、漸層和檔案大小。
4. 放進實際頁面檢查傳送檔案、顯示及替代文字，再保存設定。

檢查網站實際送出的圖片

上傳成功不代表讀者收到的就是剛才選好的檔案。網站可能建立縮圖、重新壓縮或轉換格式，也可能仍引用原始大圖。開啟瀏覽器開發者工具的 Network 面板，查看實際圖片請求與傳送大小，再對照頁面上的顯示位置。

響應式圖片可透過 srcset 提供多個尺寸候選，配合 sizes 描述版面中的顯示寬度，讓瀏覽器依情境選擇。這些設定不是保證某裝置永遠收到某一檔，也不會自行創造尚未產生的圖片。若建站系統代為生成，仍需確認候選與版面描述合理。

轉檔要由工具真正重新編碼；只把副檔名從 jpg 改成 webp，不會變成 WebP。驗收時也檢查手機瀏覽、分享預覽及需要下載的情境，因為這些地方可能使用不同的檔案或服務。發現不支援時，提供該用途可接受的格式。

留下可重做的設定，避免只剩壓縮成品

為圖片保存原始來源、授權、編輯檔、輸出尺寸及設定，並記下放在哪篇文章。日後要把橫式料理照改成直式封面，就能重新安排裁切，不必從已縮小的成品再放大。對文字圖解，保留向量原稿也更容易更新內容。

若使用線上壓縮服務，先確認上傳資料如何處理。含個人資料、未公開作品或客戶文件的截圖，應依自己的資料管理要求選工具，不能只因服務免費就直接上傳。這是選擇處理方式的一部分，也避免圖片內容與用途脫節。

檔案大小是驗收項目之一，還要確認讀者看得懂、透明背景正確、沒有裁掉關鍵步驟，以及替代文字能提供必要資訊。把格式選擇、尺寸與內容檢查一起完成，才會得到能持續更新的圖片流程。下次換圖時，沿用檢查方法並重新比較結果。

先確認圖片素材的使用授權

區分網頁與印刷色彩輸出

理解響應式版面的顯示需求

• 教學
• 軟體與 App
• 架站與電商
• 網域、主機與前端