縮放圖片

選圖片、輸入寬高或拉百分比，就得到那個畫素尺寸的檔案。控制項下面那一行會在你執行任何動作之前顯示精確的輸出尺寸 —— 而那正是大多數縮放工具留給你自己猜的部分。

縮放跟壓縮不是同一件工作

壓縮改變的是「用多少位元組去描述同一格畫素」。縮放改變的是「有多少畫素」。兩者都會讓檔案變小，也經常被混在一起，但對某個特定問題來說只有一個是正確答案。

如果表單寫「上限 2 MB」，兩種都行，而壓縮通常犧牲的畫質比較少。如果表單寫「最大 1000 × 1000 畫素」，或者網頁載入很慢是因為一張 4000 畫素的照片被塞進 400 畫素的框裡顯示，壓縮完全幫不上忙 —— 你需要的是更少的畫素。

第二種情況值得多講，因為它是網路上最常見的隱形浪費。瀏覽器拿到一張過大的圖片時，必須整張下載、整張解碼進記憶體，然後在縮小顯示時把大部分丟掉。把圖片縮到它實際顯示的尺寸，往往比任何程度的壓縮都更有效。

長寬比：這裡的「鎖定」實際上做什麼

鎖住比例、只給寬度時，高度會自動跟著算。兩邊都給，圖片會被「裝進」那個框裡 —— 結果可能比你打的數字更窄或更矮，但絕不會變形、也絕不會被裁掉。這幾乎永遠是你要的行為。

解開比例鎖，圖片會被拉伸到你給的精確數字。想要這樣是有正當理由的 —— 修正一個已知的變形、塞進一個容許稍微拉伸的固定橫幅欄位 —— 但不小心用到它的人會得到細微地不對勁的人臉。

這個工具刻意不做的是「裁切填滿」。裁切是一個「決定丟掉什麼」的判斷，必須配一個可拖曳的框和預覽才做得對。為了讓照片變成正方形而默默切掉兩側，是一種錯誤的貼心。

放大，以及它誠實的極限

你可以輸入比原圖大的尺寸，而工具在你這麼做的時候會提醒你。放大是內插：它藉由觀察鄰近畫素去發明中間的畫素。它救不回原本沒被拍到的細節，所以結果是同一張圖的「更大、更模糊」版本。

這個提醒很重要，因為很多縮放工具會安靜地從 500 畫素的來源產出一張模糊的 4000 畫素檔案，讓使用者以為得到了什麼。適度放大 —— 大約到 150% —— 在螢幕用途上常常可以接受。超過之後通常比「把原圖放大顯示」更難看，而且再怎麼重新取樣也修不好。真正的超解析度需要一個訓練過的模型，那是另一個工具、另一種成本。

實際上該用哪些尺寸

網站上滿版寬度的照片，寬 1600 畫素可以涵蓋大多數桌機版面，包含高密度螢幕。文字欄位裡的內容圖，800 到 1000。縮圖用它顯示尺寸的兩倍 —— 150 畫素的位置就用 300 —— 因為高密度螢幕大約用兩個裝置畫素對應一個 CSS 畫素。

Email 附件與通訊軟體，長邊 1600 可以讓檔案很小，同時在手機上全螢幕看還夠好。列印的算法不同：最終尺寸每英吋 300 畫素，所以 4 × 6 吋的照片要 1200 × 1800。低於每英吋 150 畫素左右，印出來就看得出模糊。

大頭照與證件上傳，請仔細讀規定 —— 那些系統經常同時規定畫素尺寸與檔案大小上限，那正是你需要「先縮放、再壓縮」的情況。

重新取樣、格式，以及隱私

縮放是用編譯成 WebAssembly 的正規重新取樣濾波器做的，不是把圖畫進一張不同尺寸的 canvas。這個差別在大幅縮小時看得出來：粗糙的 canvas 縮放是直接丟掉畫素，會產生鋸齒與摩爾紋；真正的濾波器會對來源區域取平均，讓細節保持平滑。

輸出可以維持原本的格式，也可以換成 JPG、PNG 或 WebP。要注意，一張 PNG 照片縮小後仍然存成 PNG，它還是一張 PNG 照片 —— 無損壓縮很不適合照片內容，所以選 JPG 通常會在畫素減少之外再讓檔案大幅縮小。選 PNG 時品質滑桿會消失，因為 PNG 是無損的，那個滑桿沒有東西可以控制。

一切都在這個瀏覽器分頁裡執行，而這對圖片來說不是小事：照片帶著 EXIF 中介資料，裡面可能包含 GPS 座標、相機序號與拍攝時間。伺服器端的縮放工具連這些一起收下。這裡的圖片是在本機解碼、重新取樣、重新編碼的 —— 而因為重新編碼寫出的是全新的畫素資料、不含中介資料區塊，所以位置標記也不會跟著輸出檔跑出去。