圖片縮放演算法：雙線性、雙三次插值原理解析
當你放大或縮小一張圖片時，電腦需要「猜測」新像素的顏色值。這個過程稱為插值（Interpolation）。不同的插值演算法會產生截然不同的結果 — 有些保留銳利邊緣，有些則追求平滑過渡。理解這些演算法的原理，能幫助你在不同場景下做出最佳選擇。
什麼是圖片插值？
數位圖片由一個個像素組成。當我們改變圖片尺寸時，目標圖片的像素位置可能落在原始像素的「中間」。插值演算法的任務就是根據周圍已知像素的值，計算出這些新位置的顏色。
重點摘要：插值演算法的核心問題是：已知周圍像素的顏色，如何合理推算出新像素的顏色？不同演算法在「速度」與「品質」之間做出不同的取捨。
最近鄰插值（Nearest-Neighbor）
最近鄰插值是最簡單的方法：直接使用距離最近的原始像素值作為新像素的值。
特點
- 速度最快 — 只需要一次查找，無需計算
- 邊緣銳利 — 不會產生模糊效果
- 鋸齒明顯 — 放大時會出現明顯的像素化方塊
- 適用場景 — 像素藝術（Pixel Art）、圖示放大、需要保留硬邊的場景
雙線性插值（Bilinear Interpolation）
雙線性插值考慮目標像素周圍最近的 4 個像素（2x2），根據距離進行加權平均。先在 X 方向做線性插值，再在 Y 方向做線性插值。
計算過程
- 找到目標像素在原圖中對應位置周圍的 4 個像素
- 計算目標位置與這 4 個像素的距離比例
- 先沿水平方向做兩次線性插值
- 再沿垂直方向做一次線性插值，得到最終值
特點
- 品質適中 — 比最近鄰平滑，但可能略微模糊
- 速度適中 — 比最近鄰慢，但仍然很快
- 適用場景 — 一般圖片縮放、即時預覽、遊戲紋理
雙三次插值（Bicubic Interpolation）
雙三次插值考慮目標像素周圍的 16 個像素（4x4），使用三次多項式進行加權計算。這提供了更平滑的結果，同時保留更多的細節和銳利度。
特點
- 品質最高 — 在放大時產生最平滑自然的結果
- 保留細節 — 邊緣比雙線性更銳利
- 計算較慢 — 需要處理 16 個像素的加權計算
- 適用場景 — 照片編輯、印刷品質要求、專業影像處理
三種演算法比較
| 特性 | 最近鄰 | 雙線性 | 雙三次 |
|---|---|---|---|
| 取樣像素數 | 1 | 4 (2x2) | 16 (4x4) |
| 計算速度 | 最快 | 中等 | 較慢 |
| 放大品質 | 像素化 | 略模糊 | 最平滑 |
| 邊緣保留 | 硬邊 | 中等 | 銳利 |
| 適合放大 | 像素藝術 | 一般用途 | 照片 |
| 適合縮小 | 不建議 | 可接受 | 推薦 |
Canvas API 中的實作
在瀏覽器中使用 HTML5 Canvas 進行圖片縮放時，可以透過 imageSmoothingEnabled 和 imageSmoothingQuality 屬性來控制插值品質：
imageSmoothingEnabled = false— 停用平滑（類似最近鄰）imageSmoothingQuality = "low"— 雙線性插值imageSmoothingQuality = "medium"— 中等品質imageSmoothingQuality = "high"— 雙三次插值
進階：Lanczos 重新取樣
Lanczos 重新取樣是一種更高品質的演算法，使用 sinc 函數作為基底，取樣範圍更大（通常為 6x6 或 8x8 像素）。它在縮小圖片時特別出色，能有效避免鋸齒和摩爾紋。
許多專業影像編輯軟體（如 Photoshop、GIMP）都將 Lanczos 作為預設或推薦的縮放演算法。
立即使用圖片縮放工具 →結語
選擇正確的插值演算法取決於你的使用場景。像素藝術用最近鄰，一般用途選雙線性，專業品質用雙三次或 Lanczos。了解這些基本原理，能幫助你在縮放圖片時獲得最佳效果。
參考文獻
- Gonzalez, R. C. & Woods, R. E. "Digital Image Processing." Pearson, 4th Edition, 2018. Chapter 2: Digital Image Fundamentals — Interpolation.
- Wikipedia contributors. "Bilinear interpolation." Wikipedia, The Free Encyclopedia, 2025. https://en.wikipedia.org/wiki/Bilinear_interpolation
- Wikipedia contributors. "Bicubic interpolation." Wikipedia, The Free Encyclopedia, 2025. https://en.wikipedia.org/wiki/Bicubic_interpolation
- MDN Web Docs. "CanvasRenderingContext2D: imageSmoothingQuality property." Mozilla Developer Network, 2025. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality