圖片處理指南

網站圖片太大?先選尺寸,再選 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 / 操作

用本站工具完成一次轉換

  1. 保留原始圖片,另外準備可上傳的副本。
  2. 開啟圖片格式轉換與壓縮工具,選擇 JPG、PNG 或 WebP。
  3. 先使用標準品質 82%,並從工具提供的最大寬度選項選擇合適尺寸。
  4. 下載後記錄檔案大小,放大檢查文字、輪廓與漸層;若仍太大,再降低品質或尺寸。
  5. 上傳到實際網站或接收系統,確認可以顯示。

工具目前支援單張 8 MB 以內、最多 4,000 萬像素。圖片會上傳至本站伺服器處理。PNG 的品質選项實際對應壓縮等級,不能把它當成與 JPG 相同的畫質比例。

04 / 檢查

三個容易忽略的輸出差異

透明背景變白

本站工具輸出 JPG 時會把透明區域填成白色。如果 Logo 要放在深色底圖上,請使用可保留透明的格式,再確認邊缘是否符合預期。

轉完反而更大

來源圖可能已經有效壓縮,改成另一種格式或更高品質不一定會變小。以相同顯示尺寸比較輸出結果,選擇符合畫質需求的檔案。

方向或附加資訊改變

工具重新編碼後,不應假設照片的方向、EXIF 或色彩資訊都完整保留。請重新開啟結果檢查,重要照片則保留原檔。

本文沒有宣稱特定壓縮率,因為未針對讀者的圖片做實測。延伸閱讀:線上工具的檔案處理方式。