實用創作流程

商品圖匯出 WebP：核對檔案與畫質取捨

Ciyo 編輯團隊2026年10月5日

抽象編輯插畫；下文使用真實產品截圖展示操作。

店主想縮小商品圖檔案，又不想改變已經確認的杯子。格式轉換不同於重新生成圖片：原圖應保留不變，同時用候選匯出展示取捨。

我們採用已有的虛構杯子圖作為受控原始母檔。它是合成編輯圖片，不是真實商家攝影。Ciyo 獲取原始位元組，編碼三個候選檔案，並從實際檔案製作檢查板。下列結果只描述這張圖片。

匯出前記錄原始母檔

保留已確認的原圖，檢查尺寸、模式和透明度。圖片在頁面上看似透明，實際上可能含有不透明淺色背景；應依據檔案資料選擇格式。

本例 PNG 為 1024×1024 RGB，沒有 alpha 通道，包含 1,105,072 位元組。SHA-256 與按內容定址的原始 URL 一致，編碼後原始母檔未變，因此 JPEG 無需先鋪底色。

Ciyo 用 Pillow 建立無損 WebP、品質 85 的 WebP 和品質 90 的 JPEG，均保留原始尺寸。不同編碼器的品質數字不能據此視為同等視覺品質。

若原圖有透明度，應說明不透明匯出如何處理。保留透明原始母檔，並檢查有意選擇的鋪底顏色，避免轉換悄悄產生錯誤背景。

複製這段檔案工作區提示詞

逐位元組使用這張現有商品 PNG，保留原圖不變。另存無損 WebP、有損 WebP 品質 85 和 JPEG 品質 90，尺寸均不變。報告實際檔案頭格式、位元組數、模式和 alpha。重新開啟檔案，比較無損解碼畫素與原始母檔。製作帶標籤的對照板，各候選使用相同位置的真實裁切。不要生成新圖片。

我們下載原始畫布檔案並獨立解碼。無損 WebP 的每個 RGB 畫素都與原始母檔一致。有損候選則不同：品質 85 的 WebP 最大通道差為 30，品質 90 的 JPEG 為 42。這些是本圖的核對值，不是編碼器總體品質排名。

本例有損 WebP 小很多，但只有可見變化可以接受，較小檔案才有意義。應在顧客實際觀看尺寸檢查包裝細字、顏色邊界和紋理。

這張虛構圖片的實測檔案
檔案	尺寸	位元組數	解碼畫素與原始母檔相同
PNG 原始母檔	1024×1024	1,105,072	是
無損 WebP	1024×1024	627,352	是
WebP 品質 85	1024×1024	11,056	否
JPEG 品質 90	1024×1024	55,097	否

檢查板包含橙色標籤邊緣的 72×72 裁切，以 3× 放大展示，每個裁切來自對應的儲存檔案。必須比較相同位置、相同尺度；改換裁切或顯示尺寸會削弱判斷。

板上的細節放大是明確標註的輸出檢查，與本文完整產品截圖分開。它揭示區域性變化；完整商品圖則幫助判斷這些變化在實際情境中是否重要。

Google 的 WebP 文件介紹了無損和有損編碼，但格式能力並非你商店的實測結果。交付轉換、快取、佈局和瀏覽器選擇的圖片，都可能改變顧客收到的內容。

整合後應檢查下載資源和實際店鋪頁面。本例測量檔案大小與畫素，沒有測載入速度、Core Web Vitals、轉化率或跨瀏覽器店鋪表現。

選擇透過視覺標準的最小候選，同時保留原圖與編碼設定。檔名要明確，避免同事把實驗性有損版本當成已確認的原始母檔。

若商品細節必須準確，無損保留可能比更小的有損檔案更合適。先用具有代表性的真實圖片重複測試，再決定預設匯出設定。

本例有損 WebP 更小，但結果取決於圖片內容與編碼設定，請測量自己的檔案。

不是。格式與位元組會變；本次測試中，解碼後的 RGB 畫素與原始母檔相同。

不能。應另行測試實際交付圖片與頁面效能。

把真實原始母檔放進 Ciyo，指定匯出候選，檢查細節後再驗收交付檔案。