將多張圖片合併成一張圖片,意思是在不上傳任何檔案的情況下,將兩到十二個點陣圖檔案合併成單一 PNG,並提供三種版面配置選項與完整的本機處理。最終結果是一張平坦化的圖片,而不是一個分層的專案檔,而且每個輸入檔案都會在所選的配置中保留其原始像素大小。
這是常見的需求:商品頁面使用的前後對比圖、文件說明中的一整排截圖、四格情緒板,或是市集商品列表中一整組細節裁切圖。每種情境都需要不同的版面配置,而正確的配置取決於最終圖片的用途——是要像一列那樣閱讀、像一欄那樣堆疊,還是要像網格那樣掃描。合併圖片是一個瀏覽器工具,可以處理上述三種配置,將輸出編碼為 PNG,並且永遠不會將您的原始檔案傳送到伺服器。以下是實用的逐步說明,介紹該選擇哪種配置、工具如何處理透明度與限制,以及產生結果後該如何驗證。
工具接受什麼、會跳過什麼
合併圖片工具是為瀏覽器能夠原生解碼的點陣圖檔案所設計。可接受的格式包括 PNG、JPEG、WebP、GIF、AVIF 與 BMP。其他格式會在一開始就被拒絕。SVG 是最常見的排除項目:向量檔案可能會參照外部資源,或是包含非常長的渲染指令,因此工具將其視為超出範圍,並在需要合併時請您先將其點陣化。
動畫同樣也在輸出範圍之外。動畫 GIF、動畫 WebP 或動畫 AVIF 輸入只會貢獻瀏覽器為點陣圖路徑所解碼的那一個畫格。這個單一畫格就會被放入最終的 PNG。工具並不會將多個動畫拼接在一起,所以如果您需要動態的結果,使用另一個獨立的動畫 GIF 流程才是正確的做法。
每個來源檔案都會保留其原始像素大小。不會調整大小、不會裁切,也不會改變長寬比。工具只會將每張解碼後的點陣圖繪製一次,置中於其所屬的儲存格內。這讓輸出結果可以預測,但也意味著當來源檔案大小差異很大時,在所選的配置中會出現不均勻的留白——這正是背景顏色派上用場的地方。
選擇符合目標的版面配置
這三種配置都是確定性的。每種配置都遵循一條固定的規則,適用於畫布大小、儲存格位置,以及由輸入的哪些尺寸來決定輸出。選擇哪一種,主要取決於您的最終圖片應該橫向閱讀、縱向閱讀,還是以均衡的網格方式呈現。
下表摘要說明每種配置實際上會對輸出做什麼。
| 配置 | 欄或列數規則 | 輸出尺寸 | 來源檔案的放置方式 | 典型用途 |
|---|---|---|---|---|
| 水平 | 單一橫列,所有圖片依選取順序排列 | 寬度為所有圖片寬度加上總間距後的總和;高度為最高的圖片 | 每個來源檔案以其解碼後的大小繪製,垂直置中 | 並列比較、逐步操作的截圖、前後對比圖 |
| 垂直 | 單一縱欄,所有圖片依選取順序排列 | 高度為所有圖片高度加上總間距後的總和;寬度為最寬的圖片 | 每個來源檔案以其解碼後的大小繪製,水平置中 | 長型輪播、故事序列、商品細節堆疊 |
| 網格 | 欄數為圖片數量平方根的無條件進位 | 儲存格寬度為最寬的圖片;儲存格高度為最高的圖片;畫布大小依列數與欄數而定 | 每個來源檔案置中於其儲存格內,不進行拉伸或裁切 | 情緒板、聯絡表、市集細節網格 |
一個快速的決策方式:如果結果要從左到右或從右到左閱讀,就選水平;如果像手機動態消息那樣從上到下捲動,就選垂直;如果項目多於三或四個,而且沒有特別明顯的閱讀方向,網格配置幾乎總是正確的選擇。
如何使用合併圖片工具將多張圖片合併成一張圖片
步驟很短,順序很重要:請依您希望的排列順序選擇檔案,然後在點擊合併之前先選定配置。
- 在瀏覽器中開啟合併圖片工具。
- 依您希望出現的精確順序,選擇兩張到十二張點陣圖。工具會在輸出中保留該順序。
- 選擇水平、垂直或網格配置。輸出尺寸會依此選擇與您的輸入來計算,而不是依據另一個獨立的畫布大小設定。
- 設定圖片之間的間距。間距可接受零到一百像素之間的任何數值,並會套用至所選配置中的每一個間距。
- 使用六位數十六進位選色器設定背景顏色。這會填滿所有未使用的畫布區域以及項目之間的間距。
- 選擇合併圖片,檢視顯示的輸出尺寸,然後下載產生的 PNG。
如果順序看起來不對,請在合併前更改輸入順序——工具每次都會從頭重新執行配置,不需要逐一還原個別放置。
事前需要知道的檔案與畫布限制
工具會同時強制執行四項限制,只要其中任何一項超出,執行就會停止。事前了解這些限制,是「一次就成功」與「反覆處理檔案準備」的差別所在。
| 限制 | 數值 | 影響範圍 |
|---|---|---|
| 單檔大小 | 最多 25 MiB | 每個個別的來源圖片 |
| 總大小 | 最多 100 MiB | 所有已選檔案的合計 |
| 畫布邊長 | 最多 8192 像素 | 產生之 PNG 的寬度或高度 |
| 畫布面積 | 最多 3200 萬像素 | 產生之 PNG 的寬度乘以高度 |
畫布限制的存在,是為了讓瀏覽器分頁的記憶體使用量可以預測。即使每個個別檔案都很小,由寬圖片組成的大型網格仍可能輕易超出面積上限,因此在決定配置前,值得先檢視顯示的輸出尺寸。如果水平橫條因為某個來源圖片異常高,結果高度超過 8192 像素,通常最簡單的解決方法是改用網格配置,並將該列拆成兩列。
副檔名看起來熟悉的檔案仍可能失敗。PNG、JPEG 或 WebP 容器內部若含有損壞的位元組或不支援的編解碼,會在解碼時被拒絕。發生這種情況時,從原本的應用程式重新匯出來源檔,是最快的復原方式。
透明度與背景顏色的互動方式
所選的背景顏色會在任何圖片繪製之前先塗滿畫布。這個順序很重要:來源圖片中任何透明區域都會在匯出的 PNG 中被背景顏色填滿,因此輸出從第一個像素到最後一個像素都是完全不透明的。
這在某些情況下是個優點,例如在品牌色背景上製作四格情緒板,但如果您原本預期 PNG 會保留其 alpha 通道,這就會變成陷阱。如果您需要來源之間是透明的間距,最接近的變通方法是將背景顏色設定為與圖片顯示所在表面相符的顏色——文件用白色、深色模式預覽用黑色、網頁嵌入則使用完全相同的頁面顏色。本工具並不支援僅有 alpha 通道的真正透明輸出。
匯出的 PNG 保留了什麼、捨去了什麼
輸出是由瀏覽器內建編碼器所產生的單一 PNG。來源中的銳利邊緣與精準的像素透明度會依照其原本所在位置被完整保留,而版面配置本身在您點擊合併圖片之後就固定了。除此之外,輸出刻意保持精簡。
匯出的 PNG 不會沿用 EXIF、色彩設定檔標記、原始檔案名稱,或任何其他中繼資料,也不會保留來源中的動畫、圖層或壓縮設定。它也不會以特定的位元組大小為目標——您取得的檔案大小,是 PNG 編碼器針對所選畫布與像素內容所產生的結果。如果您需要更小的檔案,正確的下一步是將該 PNG 送進專門的 PNG 壓縮工具或重新編碼流程;如果您需要具備色彩管理的印刷用輸出,請在使用能明確處理 ICC 設定檔的工具中驗證結果。
對於大多數日常任務——比較條、聯絡表、故事堆疊、情緒板——這種精簡正是您想要的。輸出就是一張平坦化的 PNG,其大小由您的輸入與版面配置決定,中繼資料中不會埋藏任何意外。
為常見任務選擇合適的配置
當選擇不明顯時,幾個具體情境會有所幫助。
商品頁面上使用的兩張圖前後對比,幾乎都會選水平。兩張圖會以完整的解碼高度呈現,較高的那張決定畫布高度,較短的那張則在該列中垂直置中。
社群限動或文件捲動頁所使用的高型輪播,幾乎都會選垂直。每張截圖保留其完整寬度,並依選取順序堆疊,使得輸出表現得像一張高聳的單一圖片,可交給任何接受單張圖片的工具使用。
六到十二個項目的情緒板或市集網格,則幾乎都會選網格配置。六個項目時,欄數會變為三,得到一個兩列三欄的畫布。十二個項目時,欄數會進位為四,得到三列四欄。當最後一列有空儲存格時,會顯示所選的背景顏色,這是一種即使數量不是完美的正方形,也能讓網格保持清晰可讀的乾淨方式。
一旦確定了想要的配置,剩下的工作流程就很機械化:依序選擇檔案、設定間距與背景,然後點擊合併圖片。