如何為網路調整尺寸和裁切圖像

調整尺寸和裁切聽起來是一回事，但它們解決不同的問題 —— 而把它們用好，往往比單靠壓縮帶來更大的提速。本指南講講兩者的區別、過大的圖像為何有害，以及如何為網路把圖像尺寸調對。

調整尺寸 vs. 裁切

• 調整尺寸（Resizing） 改變整幅圖像的尺寸，保留全部內容 —— 你是在把它放大或縮小。
• 裁切（Cropping） 切掉圖像的一部分，只留下一塊區域 —— 你改變的是畫面裡有什麼，而不僅僅是它的大小。

頭像是個好例子：先圍繞臉把它 裁 成正方形，再把那個正方形 縮 到顯示尺寸。

過大的圖像為何拖慢頁面

手機裡直接出來的照片可能寬 4,000 像素。如果它顯示在一個 800 像素寬的欄裡，瀏覽器下載的像素是它永遠能顯示的五倍，然後再即時縮小。這是白白浪費頻寬、拖慢頁面，卻毫無視覺收益。把圖像調到大致等於它顯示的尺寸，往往是可得的最大一筆檔案體積節省 —— 常常比壓縮還大。

保持長寬比

長寬比（aspect ratio） 是寬度與高度的比例。兩個維度按相同倍數縮放，圖像就不會失真；只改一個，它就會被拉伸或壓扁。大多數工具預設「鎖定」比例 —— 除非你專門想要失真，否則就讓它鎖著。若你需要 另一種 形狀（比如從直照做成寬橫幅），請裁切到新比例，而不是拉伸。

圖像該多大？

• 讓圖像寬度匹配它要填充的空間 —— 量一量容器。
• 為了在高密度（Retina）螢幕上清晰顯示，按顯示尺寸約 2 倍匯出，然後再壓縮。
• 別放大 —— 把小圖放大只會增加模糊，它變不出細節。

串起來

一個好的操作順序是 裁切 → 調整尺寸 → 壓縮。圖像縮放器 在鎖定長寬比的情況下一次處理裁切和調整尺寸，然後交給 圖像壓縮器 把檔案體積降下來。品質能壓到多狠，讀 壓縮指南；要先選對格式，讀 圖像格式講解。