將影像合併成單一檔案,意思是將兩到十二張獨立的圖片放入同一張畫布上,並可設定間距與背景顏色,最後匯出成一張 PNG。整個過程保留每張來源影像的原始像素尺寸,絕不裁切、縮放或變更長寬比,並且完全在您的瀏覽器中執行,因此來源檔案不會離開您的電腦。版面配置決定了影像的排列方式:水平排列會由左至右以解碼後的像素尺寸擺放,垂直排列會由上至下堆疊,而格狀排列則會依據影像總數所能容納的最小近似正方形欄數來排列。0–100 像素的間距會區隔各項目,而所選的背景顏色會填滿未使用的畫布以及最終格狀排列最後一列中的空白儲存格。無論輸入格式為何,輸出永遠是一張 PNG。
為什麼要將影像合併成單一檔案
人們合併影像成單一檔案的理由非常實際。攝影師會為客戶評審建立前後對照組,電商賣家會將所有商品圖組合成單張聯絡表,而設計師會將連續截圖製作成分鏡面板。遊戲開發者在正式封裝材質前,會先預覽精靈圖集(sprite atlas)的排列方式,而社群媒體管理員會將多張投影片貼文拼接成一張快速預覽圖,免去同時處理多個檔案的麻煩。共同的邏輯非常簡單:與其透過電子郵件、上傳或分享 N 個影像附件,不如只寄出一個整合過的檔案,讓收件者一次開啟即可。
這種單一檔案的工作流程也對歸檔有所助益。一張涵蓋當天所有收據掃描的聯絡表,比十二張散落的 JPEG 更容易整理。以一張影像呈現的商品變化格狀圖,在品牌素材庫中會成為單一資產。一張水平排列的連續畫格,讓審閱者不必解壓縮就能逐格檢視流程。在這些情境中,目標都是減少需要管理的檔案數量、簡化分享流程,並產出一張整齊的影像,同時仍保留每張原始圖片的完整解析度。
三種版面配置及其適用時機
三種版面配置已能涵蓋大多數使用情境,下表整理了各配置背後的尺寸計算方式。
| 版面配置 | 輸出寬度公式 | 輸出高度公式 | 典型用途 |
|---|---|---|---|
| 水平 | 影像寬度總和加上間距 | 最高影像的高度 | 時間軸條、A/B 對比、全景分鏡 |
| 垂直 | 最寬影像的寬度 | 影像高度總和加上間距 | 漫畫格、上下排列的前後對照、編號流程步驟 |
| 格狀 | 欄數 × 儲存格寬度 | 列數 × 儲存格高度 | 聯絡表、畫廊預覽、精靈圖集草稿 |
水平版面會由左至右以解碼後的像素尺寸排列影像,以最高的影像作為列高,並將較矮的影像垂直置中。垂直版面會由上至下堆疊影像,以最寬的影像作為欄寬,並將較窄的影像水平置中。在這兩種排列中,較矮或較窄的來源會以最長邊為基準置中,而不是被拉伸以配合尺寸。
格狀版面最接近聯絡表的概念。工具會以影像數量的平方根無條件進位,計算出最小近似正方形的欄數,因此九張影像會填滿三乘三的格狀,而十張影像會填滿四乘三的格狀,最後一列部分為空。每個儲存格會以解碼後最寬的影像和最高的影像作為邊界,每張來源影像在儲存格內置中且不被拉伸。最後一列的空白儲存格以及任何儲存格內未使用的空間,都會顯示所選的背景顏色,這使得格狀版面特別適合用於預覽表與畫廊。
以下以三張影像在水平版面上的具體計算範例說明,使用 20 像素的間距。影像 A 為 800 × 600,影像 B 為 600 × 400,影像 C 為 400 × 500。輸出寬度 = 800 + 20 + 600 + 20 + 400 = 1840 像素,輸出高度 = max(600, 400, 500) = 600 像素。這就是整個尺寸公式的唯一計算方式:將相關邊長相加,加上間距,再以垂直方向上最長的邊決定另一個維度。
如何將影像合併成單一檔案
實際執行工作流程需要三個明確步驟。合併影像工具接受兩到十二個支援的點陣圖檔案,依照您指定的順序排列,讓您選擇版面配置,並產生一張可供下載的 PNG。
- 依照您希望排列的順序,選擇兩到十二張支援的點陣圖影像。PNG、JPEG、WebP、GIF、AVIF 與 BMP 檔案會直接在瀏覽器中解碼;SVG 則刻意被拒絕,因為它可能引用外部資源或包含極大的繪製指令。
- 選擇水平、垂直或格狀版面,然後設定間距(0–100 像素)並透過六位數色彩選擇器設定背景顏色,該顏色會填滿未使用的畫布以及影像之間的區域。
- 選擇「合併影像」,確認結果頁面上顯示的輸出尺寸,然後下載產生的 PNG。瀏覽器會在無需任何網路上傳的情況下,自行處理解碼、版面計算、繪製與 PNG 編碼。
每張來源會透過瀏覽器的影像點陣圖路徑解碼一次,以原始像素尺寸擺放,然後畫布會透過標準瀏覽器編碼器編碼為單一 PNG。檔案選擇器中的選取順序會被完整保留,因此依照您希望影像出現的順序挑選檔案,是最簡單的結果控制方式。
支援的格式、尺寸限制與畫布邊界
某些組合在建構畫布之前就會失敗,以下限制說明了原因。工具刻意限制操作的範圍,以避免單一過大的影像導致瀏覽器分頁當機。
| 限制條件 | 上限 | 達到上限時的處理方式 |
|---|---|---|
| 每次執行的影像數 | 2 到 12 | 少於兩張或多於十二張會在解碼前被拒絕 |
| 單檔大小 | 25 MiB | 超過此大小的檔案不會被處理 |
| 合併總大小 | 100 MiB | 選擇的檔案總和超過此限制會被整批拒絕 |
| 畫布寬度或高度 | 8,192 像素 | 任一邊超過此值會中止操作 |
| 畫布面積 | 32,000,000 像素 | 寬 × 高超過此值會被拒絕 |
支援的點陣圖格式為 PNG、JPEG、WebP、GIF、AVIF 與 BMP。即使副檔名看似熟悉,若檔案的位元組損毀或編解碼器不支援,仍可能處理失敗,因此對任何出錯的來源進行簡短檢查是值得的。動畫 GIF、動畫 WebP 或動畫 AVIF 輸入,僅會貢獻瀏覽器影像點陣圖路徑所解碼的那一格畫面;在單一 PNG 輸出中,不會保留動畫效果。
輸出 PNG 保留與捨棄的內容
輸出永遠是一張 PNG,而這個選擇會帶來明顯的影響。PNG 能保留解碼後輸入中的銳利像素與透明度,但所選的不透明背景顏色會先被填入,因此來源影像中任何透明區域在最終檔案中會變成該背景顏色。結果是一張靜態 PNG,其可見像素符合您選擇的版面,邊緣銳利,且不會因二次重新編碼而產生壓縮瑕疵。
輸出過程中會刻意捨棄若干細節。EXIF 中繼資料、色彩描述檔標籤、圖層資訊、原始檔名以及來源格式標頭,都不會保留在 PNG 中。工具不會以目標位元組大小進行壓縮,也不會新增中繼資料。針對印刷製作或需要色彩管理的合成作業,請在發布前於專用軟體中檢查匯出的 PNG,因為本機工作流程是針對版面設計,而非色彩管理流程進行最佳化。
為何本機處理如此重要
所有作業都在當前的瀏覽器分頁中進行。影像解碼、版面計算、畫布繪製、PNG 編碼與下載產生都在本機執行,這表示來源檔案不會傳送到伺服器,也不會離開您的電腦。對於需要處理未公開商品圖、內部螢幕擷圖、醫療影像、財務文件,或任何涉及隱私與合規要求的內容的工作流程而言,這種本機路徑消除了上傳式合併工具所帶來的一整類風險。
PNG 下載完成後,用於繪製的每個中介 ImageBitmap 都會被關閉,暫存物件 URL 也會被撤銷,這能讓瀏覽器的工作集保持整潔,以利下次操作。在不同的影像組合上再次執行工具時,每次都會從乾淨的畫布開始,因此先前的選擇與先前的輸出不會影響新的執行結果。
如果您正在比較各種選擇,免費將影像合併成 PDF:PNG 或多頁輸出對此有詳細說明。
如果您正在比較各種選擇,如何將影像合併成單一 PDF(或單一 PNG)對此有詳細說明。