JS Image Carver - 免費內容感知圖片調整尺寸工具，自動偵測圖片元素間的距離並自動演算生成新的圖片

JS Image Carver 是一款免費開源的線上工具，能在調整圖片寬高比時自動保留畫面中的人物和主體，不讓人物被壓縮或重要內容被裁掉。

這個工具由軟體工程師 Oleksii Trekhleb 開發，完全在瀏覽器端運作，不需要安裝軟體、不需要註冊帳號，圖片也不會上傳到任何伺服器。它採用 Seam Carving（接縫雕刻）演算法，自動計算圖片中每個區域的重要程度，優先移除最不重要的像素來達到縮放效果。如果你經常從免費圖庫下載素材來設計，這個工具能幫你省下不少調整尺寸的時間。

跟 Photoshop 裡的「內容感知縮放」功能原理相同，但 JS Image Carver 完全免費、免安裝。跟市面上多數AI 圖片放大工具的技術路線也不同，它不是用機器學習去猜測缺少的像素，而是用數學運算精確找出「影響最小」的像素路徑來移除。好處是結果可預測、不需要 GPU，整個流程都在瀏覽器裡完成。

什麼是內容感知縮放（Content-Aware Resizing）

一般調整圖片大小有三種做法：等比例縮放、裁切、直接變形。等比例縮放會讓整張圖變小，人物跟著縮成一團；裁切會丟失邊緣內容；直接變形則讓畫面扭曲。內容感知縮放走的是不同的路線：它先分析整張圖片，計算每個像素區域的「能量值」，邊緣清晰、細節豐富的區域（人物、物體輪廓）能量值高，代表重要；顏色平滑、變化不大的區域（天空、牆面）能量值低，代表不重要。接著優先移除不重要的區域，把重要部分完整保留。

舉例來說，一張海邊夕陽照片，天空佔了上半部大面積但顏色變化平緩。內容感知縮放會辨識天空為低能量區域，從那裡開始移除像素；沙灘上的人物、海浪的浪花這類細節豐富的區域則完整保留。最終得到一張天空變窄、人物大小幾乎不變的圖片。Adobe Photoshop 的「內容感知縮放」也是採用類似原理，但需要付費訂閱才能使用。JS Image Carver 把同樣的技術做成了免費網頁工具，搭配像 Adobe Photoshop Express 這類線上編輯器，就能處理大部分的圖片調整需求。

Seam Carving 演算法原理

JS Image Carver 背後的 Seam Carving 演算法，最早由 Shai Avidan 和 Ariel Shamir 在 2007 年 SIGGRAPH 會議上發表。整個流程可拆成三個步驟。

計算能量圖（Energy Map）

演算法使用 Sobel 運算子對圖片進行邊緣偵測，計算每個像素與周圍像素的亮度差異。差異越大（例如物體邊緣），能量值越高；差異越小（例如整片天空），能量值越低。把所有像素的能量值畫出來就是一張「能量圖」，亮度越高的地方就是越不能動的區域。

找出最小能量接縫（Minimum Energy Seam）

有了能量圖後，演算法用動態規劃（Dynamic Programming）找出一條從圖片頂端到底端的「接縫」。條件是總能量值最低，而且每個像素只能往下或往左下、右下走。這條接縫經過的每個像素都是「最不重要的」，移除它對畫面影響最小。

移除接縫並重複

找到最小能量接縫後移除它，圖片寬度減少 1 個像素。然後重新計算能量圖、再找下一條接縫，不斷重複直到圖片達到目標尺寸。動態演示中可以看到天空這類低能量區域像被「吃掉」一樣逐漸消失，而人物和物體幾乎紋絲不動。這個運算過程吃 CPU，大圖片處理時間會比較長，跟使用 WordPress 快取外掛加速網站一樣，運算效率是關鍵。

完整的演算法細節可參考原始 Seam Carving 論文 PDF，或作者在 trekhleb.dev 部落格上的技術文章，裡面有詳盡的圖文說明。

JS Image Carver 操作教學

整個操作流程約 3 分鐘就能完成，步驟如下。

開啟線上工具

在瀏覽器開啟 JS Image Carver 官網，進入頁面後會看到一個預設的熱氣球範例圖片，可以直接用它來體驗效果。

上傳圖片

點擊頁面上方的「CHOOSE IMAGE」按鈕，選擇想要調整的圖片。建議使用有明確主體的圖片（例如人物在風景前的照片），效果最明顯。如果手邊沒有適合的圖片，可以到 TechMoon 整理的免費圖庫清單裡找一張來試試。

設定目標尺寸

在 Width 和 Height 欄位輸入目標百分比。例如輸入 50 就代表將寬度或高度縮小到原本的 50%。兩個數值可以不同，例如寬度設 50、高度設 80。隨時可以重設再來一次。

選擇品質設定

如果希望處理後品質更好，可在 Resize 之前勾選「Higher quality」選項。開啟後演算法使用更精細的計算方式，處理時間會長一些，但結果的平滑度更好。趕時間的話先用預設品質看效果，不滿意再開高品質重跑。

開始縮放並下載結果

點擊「RESIZE」按鈕開始處理。處理過程中可以看到動態的縮放動畫，非常直覺。完成後在結果圖片上按右鍵選擇「另存圖片」即可下載。如果需要加浮水印，可以把下載的圖片拿到 Mark My Images 裡做後續處理。

完整的原始碼和更多技術細節可在 GitHub 上的 js-image-carver 專案頁面找到，有興趣研究演算法實作的開發者可以直接看程式碼。

實測對比：內容感知縮放 vs 傳統縮放

實際用一張風景照做對比測試，測試條件是將圖片寬度各縮小 50%，一張用 JS Image Carver 的內容感知縮放，另一張用一般的等比例縮放。

從對比圖可以看出關鍵差異。左邊是內容感知縮放的結果，中間是原始圖片，右邊是傳統縮放。傳統縮放把整張圖等比壓縮，人物和熱氣球全部跟著縮小，細節變得模糊。內容感知縮放則「擠壓」了天空和背景區域，熱氣球和前景的大小幾乎維持不變。

動態演示中能清楚看到天空區域因為「貢獻度」最低（能量值最小），演算法從天空開始移除像素。熱氣球邊緣清晰、能量值高，所以被完整保留。這種效果在有明確前景主體的照片上特別顯著。

不過要誠實說，這個技術不是萬能的。如果你處理的是建築物或有明確線條結構的照片，可能會發現柱子被壓歪、窗戶變形之類的狀況。因為演算法只看能量值，它不知道什麼是建築物。如果你需要的是提升圖片品質而不是改變比例，AI Image Enhancer 或 AI Image Denoiser 會是更適合的選擇。

JS Image Carver 的限制與不適合的使用場景

用過幾次後，以下是幾個 JS Image Carver 比較吃力的場景。

沒有明確主體的圖片效果不明顯

如果圖片是抽象畫、純紋理背景或漸層色的設計圖，整張圖的能量值都很接近，演算法無法判斷哪些區域比較不重要。這時用一般等比縮放或裁切，效果可能還比較好。

人臉和多人物合照要小心

照片裡如果有多個人臉靠得很近，內容感知縮放可能會讓臉部產生不自然的變形。雖然演算法會盡量避免移除高能量區域，但縮小幅度較大時，臉部之間的間距還是會被壓縮。這種情況下直接裁切可能反而更好看。

建築物和幾何線條容易扭曲

城市街景、建築外觀、室內設計照片這類有大量直線和幾何結構的圖片，經過內容感知縮放後柱子可能會變彎、窗戶可能會變形。因為演算法在找最小能量路徑時會穿過這些結構元素。如果需要修復這類圖片的畫質，HitPaw Photo Enhancer 會是更對口的工具。

處理速度和大圖片的限制

所有運算都在瀏覽器裡進行，解析度很高的圖片（例如 4K 以上）處理時間可能需要幾十秒甚至更久。開啟高品質模式後時間會更長。如果需求是大量壓縮圖片來加速網站，圖片壓縮工具會更有效率。

無法批次處理和局部保護

JS Image Carver 一次只能處理一張圖片，也沒有「保護區域」功能（指定某個區域絕對不能動）。如果有批次處理需求，可能需要直接使用作者的開源程式碼自行修改，或改用 Photoshop 的內容感知縮放（它支援遮罩保護）。

使用場景	是否適合	建議替代工具
有明確主體的風景照縮放	非常適合	JS Image Carver
網頁 Banner 適應不同裝置	適合	JS Image Carver
人物合照比例調整	要小心	直接裁切
建築物或幾何線條照片	不適合	傳統裁切或變形
紋理或漸層背景	效果不明顯	等比縮放即可
大批次圖片處理	不適合	Photoshop 或自行改寫原始碼

5 個你真的會用到的實際場景

以下是整理後最常見的 5 個應用場景。

網頁 Hero Banner 適應不同裝置

設計網頁時 Hero Banner 通常需要適應桌面、平板、手機三種寬度。直接等比縮放，手機版的人物會小到看不見。用內容感知縮放把手機版的背景區域壓縮掉，就能讓人物維持適當大小。這對經營 WordPress 網站的人來說非常實用，搭配良好的 SEO 外掛和合適的WordPress 主機，能讓網站在各種裝置上都有最佳呈現。

社群媒體貼文比例轉換

Instagram 貼文偏好 1:1 或 4:5 的比例，但原始照片可能是 16:9 的橫幅。直接裁切會丟掉一半畫面，用內容感知縮放則能把背景壓掉、保留主體的完整性。

電子報 Header 圖片

電子報 Header 通常有固定寬度限制（大多是 600px）。如果原始素材是寬幅照片，用內容感知縮放壓掉左右兩側的背景，就能讓中間的文字或主體維持清晰可見。

WordPress 精選圖片

WordPress 的精選圖片通常有固定長寬比，例如佈景主題要求 16:9 但照片是 4:3。用內容感知縮放來調整比例，比直接裁切或硬拉變形都來得自然。如果你的 WordPress 網站還在選主機，可以參考 Bluehost 或 Kinsta 的方案比較。

簡報背景圖

做簡報時需要一張填滿整張投影片的背景圖，但原始圖片的長寬比不對。內容感知縮放能幫你把背景「擠」到正確的比例，而且不會壓縮到圖片中可能出現的文字或標誌區域。簡報中的圖示素材可以從 Ionicons 或 Heroicons 這類免費圖標資源庫找到。

其他圖片處理工具推薦

JS Image Carver 處理的是「改變比例但不破壞主體」的需求。根據你的實際需求，以下工具可能更適合。

圖片壓縮工具

如果目標是減少圖片檔案大小（不改變尺寸），Compressor.io 支援 JPEG、PNG、SVG 等格式，壓縮效果很好。Optimizilla 可以一次上傳 20 張圖片，還能個別調整壓縮品質。iLoveIMG 功能更全面，從壓縮、裁切到加水印都有。

AI 圖片放大工具

如果需求跟 JS Image Carver 相反，是要把小圖片放大，AI Image Upscaler 和 Clipdrop Image Upscaler 都能用 AI 技術將圖片放大 2 到 4 倍而不失真。JS Image Carver 負責縮小，這些工具負責放大，搭配使用就能處理各種尺寸轉換需求。

圖片去背工具

有時候你需要的不是縮放，而是把主體從背景中分離出來。PhotoRoom 是一款好用的免費線上去背工具，能快速將前景物品與背景分離。也可以參考免費線上去背工具清單，依照需求挑選。

圖片格式轉換工具

現代網頁越來越多使用 WebP 格式來加速圖片載入。AnyWebP 可以快速將 WebP 轉換成 JPG、PNG、ICO 等常見格式，操作簡單而且免費。

適合誰、不適合誰

適合的人：網頁設計師需要快速調整 Banner 比例、內容創作者需要把照片轉換成不同社群平台的尺寸、前端工程師需要測試不同裝置下的圖片呈現效果、部落客需要調整 WordPress 精選圖片的長寬比。

不適合的人：需要批次處理上百張圖片的專業設計師（建議用 Photoshop 或寫腳本）、需要精確控制保護區域的人（目前不支援遮罩保護）、處理建築物或幾何線條照片的人（容易扭曲）。

JS Image Carver 常見問題

JS Image Carver 支援哪些圖片格式？

基本上瀏覽器能顯示的圖片格式都支援，包括 JPG、PNG、BMP、WebP 等。建議使用 JPG 或 PNG 格式，效果最穩定。

處理後的圖片畫質會下降嗎？

嚴格來說，因為像素確實被移除了，所以圖片解析度會降低。但跟傳統縮放不同的是，重要的細節（人物、物體的輪廓）會被完整保留。開啟「Higher quality」模式後演算法會使用更精細的插值方式，讓結果更平滑。如果處理後覺得畫質不夠理想，可以再用 AI 圖片增強工具來提升清晰度。對於需要修復老舊照片的人，Image Colorizer 能幫你把黑白照片重新上色。