圖片工具最常被拿來做三件事:把檔案變小、把尺寸改對、把格式換掉。這三件事聽起來像同一件,實際動到的東西完全不同 —— 壓縮改的是編碼品質,尺寸調整改的是像素數量。
該用哪一個工具
- 圖片壓縮
- 像素尺寸已經對了、只是檔案太大時用它。畫面上只有一根品質滑桿(預設 80),圖的長寬不會變。對 PNG 它走的是色彩量化而非 JPEG 那種品質壓縮,照片類的 PNG 壓完可能出現色階斷層;本來就最佳化過的圖甚至可能變大,此時「減少」百分比會是負數。
- 圖片尺寸調整
- 要把圖改成指定寬高時用它 —— 上傳限制 2000 px、版面需要固定寬度。長寬比預設鎖定,改一邊另一邊自動跟著算。它沒有品質選項,JPEG 會以瀏覽器預設值重新編碼一次,所以「只改尺寸」其實也重壓了一輪。
- 圖片格式轉換
- 要換的是格式而不是尺寸時用它:JPEG、PNG、WebP 三選一,輸出維持原本的像素尺寸。轉成 JPEG 前請先確認圖沒有透明背景 —— 那個格式沒有 alpha 通道,去背的 logo 會壓在黑底上。選 PNG 時品質滑桿會收起來,因為 PNG 本來就不吃品質參數。
- 圖片轉 Base64
- 這一個完全不動像素,把檔案原封不動讀成 data URI,並給出純 Base64、
<img>標籤與 CSSbackground-image四種可直接複製的寫法,適合把小圖示嵌進樣式表。編碼後體積會膨脹約三分之一,請先壓過再轉。
共通限制
- 只要經過畫布重繪(壓縮、尺寸調整、格式轉換),EXIF 就會被清掉 —— 拍攝時間、GPS 座標與相機型號都不會留在輸出檔裡,只有「圖片轉 Base64」不受影響。
- 動態 GIF 與動態 WebP 送進前三個工具只會留下第一格,SVG 重繪後會變成點陣圖,而且這幾種格式在拖放時不會被擋下。四個工具都是一次一張,單檔上限 10 MB。
- 圖片是用
FileReader與<canvas>在你的裝置上讀進來的,沒有上傳這個步驟。壓縮工具需要一份在 Web Worker 裡執行的函式庫,那份檔案由本站自己提供,不會向第三方 CDN 索取;頁面本身仍載有廣告等第三方資源。
常見問題
為什麼壓縮完檔案反而變大?
常見於已經最佳化過的圖。壓縮這個動作是重新編碼一次,若原檔已經用更強的編碼器處理過(例如 mozjpeg 或 pngquant),重編自然不會更小,這時沿用原檔即可。
該先壓縮還是先改尺寸?
先改尺寸。檔案大小主要由像素數量決定,一張 4000×3000 的照片就算品質壓到 50,還是比先縮到 1200 寬再壓來得大,而且畫質更差。