圖片處理指南
網站圖片太大?先選尺寸,再選 JPG、PNG 或 WebP
用實際尺寸計算與操作步驟,說明圖片格式、透明背景、品質設定及輸出檢查。
01 / 選擇
先看圖片內容與用途
照片、截圖與透明 Logo 的需求不同。先問圖片要放在哪裡、是否需要透明背景,以及接收方支援什麼格式,再決定輸出方式。
| 格式 | 可優先考慮的用途 | 注意事項 |
|---|---|---|
| JPG | 一般照片、商品情境照 | 有損壓縮,不支援透明背景 |
| PNG | 需要清晰邊緣的截圖、透明圖像 | 無損壓縮;照片內容可能較大 |
| WebP | 網頁圖片,或需要透明背景的壓縮圖像 | 支援有損、無損與透明;仍需確認接收軟體支援 |
格式特性參考 MDN 圖片格式指南。實際大小受圖片內容與編碼設定影響,不能只靠副檔名判斷。
02 / 尺寸
先縮小不需要的像素
假設原圖是 4000 × 3000 像素,預計放在寬 800 CSS 像素的區塊。若以兩倍顯示密度作為準備起點,可先製作寬 1600、高 1200 的版本,再實際檢查畫質。這是尺寸計算示例,不是固定適用所有網站的規格。
4000 × 3000原圖:1200 萬像素
1600 ÷ 4000 = 0.4寬高都按 40% 調整
1600 × 1200輸出:192 萬像素
像素數變少不代表檔案容量會按相同比例縮減。還需要實際匯出,才知道檔案大小;文字較多的圖片也應檢查小字是否仍清楚。
03 / 操作
用本站工具完成一次轉換
- 保留原始圖片,另外準備可上傳的副本。
- 開啟圖片格式轉換與壓縮工具,選擇 JPG、PNG 或 WebP。
- 先使用標準品質 82%,並從工具提供的最大寬度選項選擇合適尺寸。
- 下載後記錄檔案大小,放大檢查文字、輪廓與漸層;若仍太大,再降低品質或尺寸。
- 上傳到實際網站或接收系統,確認可以顯示。
工具目前支援單張 8 MB 以內、最多 4,000 萬像素。圖片會上傳至本站伺服器處理。PNG 的品質選项實際對應壓縮等級,不能把它當成與 JPG 相同的畫質比例。
04 / 檢查
三個容易忽略的輸出差異
透明背景變白
本站工具輸出 JPG 時會把透明區域填成白色。如果 Logo 要放在深色底圖上,請使用可保留透明的格式,再確認邊缘是否符合預期。
轉完反而更大
來源圖可能已經有效壓縮,改成另一種格式或更高品質不一定會變小。以相同顯示尺寸比較輸出結果,選擇符合畫質需求的檔案。
方向或附加資訊改變
工具重新編碼後,不應假設照片的方向、EXIF 或色彩資訊都完整保留。請重新開啟結果檢查,重要照片則保留原檔。
本文沒有宣稱特定壓縮率,因為未針對讀者的圖片做實測。延伸閱讀:線上工具的檔案處理方式。