尺寸調整處理的是像素數量:把一張 4032 × 3024 的照片重新取樣成 1200 × 900,之後每一個位元組、每一次繪製都少了將近九成的資料量要處理。整段運算是把圖畫進一塊 <canvas> 再讀回來,全在你的瀏覽器裡完成。
使用步驟
- 拖放或點擊虛線框選一張圖。這裡收的是所有 MIME 型別以
image/開頭的檔案,不限 JPEG 與 PNG。 - 讀取完成後,框下方會出現一行「原始尺寸:W × H px」,寬度與高度兩個欄位也會先填上這組數字 —— 這是你換算比例的基準,動手前先看它一眼。
- 在「寬度 (px)」或「高度 (px)」輸入目標值。兩欄中間那個鎖頭圖示預設是鎖上的,改一邊,另一邊會照原圖比例自動算出來。
- 想做非等比的變形就先點一下鎖頭解鎖(圖示會從閉合變成開啟),這時兩個欄位各自獨立。要回到等比,再點一次鎖上。
- 按「調整尺寸」。畫面沒有進度條,圖畫完就直接出現在下方,旁邊是「下載」按鈕,檔名格式為
原檔名_寬x高.原副檔名。
什麼時候用得上
把相機或手機的原圖縮到網站接受的寬度
內容管理系統與論壇常常規定「圖片寬度不得超過 1920 px」,而現在一支手機拍出來動輒 4000 px 起跳。先把寬度填成 1920、讓高度自動跟著算,再上傳,比丟原圖進去讓伺服器自己縮安全得多 —— 你能親眼確認縮完的樣子,也不必猜對方用什麼演算法。
批次產生規格一致的商品縮圖
電商列表頁最怕每張縮圖高度不一,滑動時整排卡片跟著跳。先決定一個共同寬度(例如 600 px),每張都只填寬度、讓高度自己算,版面上再用固定比例的容器搭配 object-fit: cover 收邊,就能兼顧一致性與不變形。
把 @3x 的切圖降回 @1x 對照檢查
設計交付常常只給一份高倍圖,要確認圖示在實際顯示尺寸下還讀不讀得懂,最快的方法就是縮成 1x 直接看。線條太細、內距太小、字級撐不住的問題,在這個尺寸下會立刻現形,不用等到裝進 App 才發現。
為社群卡片準備固定尺寸的圖
Open Graph 縮圖常見的是 1200 × 630 這種比例明確的規格。要注意這個工具只做縮放不做裁切:直接解鎖硬填 1200 × 630,人臉會被拉扁。正確順序是先在任何一個能裁切的軟體裡把構圖裁成 40:21,再回來把它縮到精確的像素值。
限制與注意事項
- 鎖定比例時,另一欄永遠是拿「原始尺寸」的比例去算,不是拿你上一次輸入的值去算。所以解鎖亂改一通之後,只要鎖回來再碰其中一欄,比例就會回到原圖的比例,不會愈算愈歪。
- 自動算出來的那一邊會四捨五入成整數,所以偶爾會和你手算的差 1 px,例如 1920 × 1080 縮成寬 800 會得到高 450,而某些奇怪的原始比例則可能算出 449。像素不能有小數,這是無可避免的取整。
- 輸出走的是
canvas.toDataURL(原檔的 MIME 型別),而且沒有帶品質參數 —— 意思是 JPEG 會用瀏覽器的預設品質(多數瀏覽器是 0.92)重新編碼一輪。所以「只是改個尺寸」其實也重壓了一次,這也是為什麼縮小後的 JPEG 檔案大小不會恰好照著像素比例縮。 - PNG 走的是無損編碼,透明背景會完整保留;但要留意,把一張本來就很小的 PNG 放大再存,檔案可能比原檔大好幾倍,因為像素變多了。
- 瀏覽器只認得幾種輸出格式。丟 GIF 或 SVG 進來時,畫面上看起來一切正常,實際存下來的位元組卻是 PNG,副檔名還是照抄原檔的
.gif/.svg,因為檔名是把原檔名拆開再拼回去的。 - 寬高欄位只有最小值 1,沒有上限。填進幾萬像素會撞到瀏覽器的畫布面積上限,得到的可能是一張空白圖或整個動作無聲失敗;欄位留空或填 0 時按下按鈕則是完全沒有反應,兩種情況都不會有錯誤訊息。
- 縮放是一步到位的,沒有分階段降取樣。把 4000 px 一口氣縮到 200 px 這種極端比例,細線條與細小文字可能出現鋸齒或直接消失;真的在意成品品質,分兩三次縮(先 1000、再 400、再 200)會明顯乾淨一些。
- 輸出檔不帶任何 EXIF,拍攝參數與 GPS 都不會跟著出去。同時這也表示相機寫的方向標籤消失了,畫面上看到什麼方向,檔案裡就是什麼方向。
- 這裡沒有裁切、旋轉、百分比縮放、加浮水印,也不能一次處理多張;一次一張,單檔超過 10 MB 會被擋在門外。
常見問題
圖片會被送到伺服器嗎?
不會。檔案是用 URL.createObjectURL 掛給一個 <img>,再由 <canvas> 重繪,全程在你的裝置上,沒有任何請求夾帶圖片內容離開瀏覽器。(頁面本身仍會載入廣告等第三方資源,那與你選的檔案無關。)
可以只填百分比嗎,例如縮成 50%?
欄位只吃像素值,但畫面上就寫著原始尺寸,自己乘一下即可:3000 × 2000 的一半是 1500,填進寬度,高度會自動變成 1000。比例鎖著的時候你只需要算一邊。
放大圖片會讓它變清楚嗎?
不會。放大只是把既有的像素內插成更多像素,資訊量沒有增加,邊緣會變得柔軟模糊。真的需要更大的圖,請回頭找原始檔或重新拍攝;若是插圖或圖示,向量原始檔(AI/SVG)才是正解。所謂 AI 超解析度是另一種技術,這個工具不做那件事。
為什麼縮完的 JPEG 看起來有點糊,檔案也沒有想像中小?
因為輸出時做了一次重新編碼,而工具沒有提供品質選項,只能吃瀏覽器的預設值。如果你的目標其實是「檔案要更小」,順序應該是先在這裡把像素縮到位,下載後再丟進圖片壓縮工具,用那根滑桿控制品質,兩步分開會比一次到底可控得多。
按了「調整尺寸」完全沒動靜是怎麼回事?
最常見的是其中一個欄位是空的或 0 —— 程式碰到無效數字會直接跳出,不做任何提示。其次是那個檔案瀏覽器根本解不開(例如相機的 HEIC 原檔),這時連原始尺寸那一行都不會出現,因為寬高是圖片載入成功後才填進去的。
調整完的圖可以直接再縮一次嗎?
畫面上的結果不會變成新的來源,兩個欄位仍然對著最初那張圖。想接著縮就先下載,再把下載回來的檔案拖進來 —— 不過每經過一輪重繪都會再損失一點細節,能一次算好目標尺寸就別分兩次。