how to split an image into a grid photoshop
如何將影像分割為網格(無需 Photoshop)

快速解答

Image Grid Splitter 可將一個本機的 JPG、PNG 或 WebP 檔案分割成最多 100 個全解析度 PNG 格點的精確矩形網格,且每個來源像素都會被完整保留一次。整個工具完全在目前的瀏覽器分頁中執行——解碼、切割、編碼與下載建立全部在本地完成——因此來源影像絕不會上傳到伺服器。您只需選擇檔案、輸入 1 到 10 列與 1 到 10 行、點選 Split image,就能將每個格點下載為命名清楚的 PNG,例如 photo-row-2-column-3.png。這是最簡潔的網格切割方式,無需開啟 Photoshop 或任何其他編輯器,且輸出結果可透過您所指定的列數與行數直接預測。

為何人們會搜尋 Photoshop(以及 Photoshop 工作流程實際上需要什麼)

「split an image into a grid Photoshop」是描述這項任務最常見的說法之一,因為 Photoshop 將這套工作流程發揚光大。在 Photoshop 中,典型的做法是結合 Slice 工具與 Save for Web (Legacy):使用工具在畫布上繪製切片邊界,與所需的輔助線進行雙重比對,然後將每個區域分別匯出為檔案。這方法可行,但前提是您已訂閱 Photoshop、熟悉手動佈置輔助線,並願意等待應用程式啟動與重新算繪畫布。對於一次性的 Instagram 3×3 貼文、必須分割為可列印格點的螢幕擷圖,或需要切割為格點的長幅全景照片而言,這些前置作業比任務本身還要繁重。

瀏覽器式切割將這些前置作業簡化為單一決策:您需要幾列、幾行?其餘步驟由工具接手,依據影像的原始像素尺寸套用網格,而非任何縮放後的預覽。結果是一份編號的格點清單,可逐一下載,完全無需操作圖層面板、切片面板或匯出對話框。

Image Grid Splitter 能做與不能做的事

Image Grid Splitter 是一款專注的網格切割工具。您提供單一本地影像與列×行數量;它會以由上至下、由左至右的閱讀順序,回傳每個格點一張 PNG,且每張皆以原始解析度算繪。最多可達 100 個格點(10 列 × 10 行),輸入限制為瀏覽器可解碼的 JPG、PNG 與 WebP 檔案,單檔上限 25 MiB,解碼後尺寸每邊最多 20,000 像素、總計 40 百萬像素,以維持分頁流暢度。

此工具刻意保持精簡。它不會偵測人臉、不會自動尋找漫畫格、不會產生重疊切片、不會添加出血、不會將下載封裝為 ZIP、不會重建全景,也不會最佳化其產生的 PNG 檔案。沒有每格壓縮滑桿,也沒有間距選項。如果您的專案需要印刷出血、間距不一的社群網路範本,或格點之間的手動輔助線,仍應選擇支援手動切片位置的編輯器。

三步驟將影像分割為網格

整個工作流程包含三個明確動作,在Image Grid Splitter中於目前瀏覽器分頁內執行。

  1. 選擇一個符合顯示檔案與像素限制的本機 JPG、PNG 或 WebP。工具會在切割前顯示檔案大小、解碼後尺寸與百萬像素數,讓您能確認來源符合 25 MiB 與 40 百萬像素上限。
  2. 輸入 1–10 列與 1–10 行,然後選擇 Split image。工具使用影像的原始像素尺寸,而非任何縮放後的預覽尺寸,且會拒絕產生零像素格點的網格值(例如,從兩像素高的影像中切割三列)。
  3. 檢查每個編號格點的尺寸並下載所需的 PNG 檔案。結果會以閱讀順序列出每個格點,顯示其精確寬度、高度與大約編碼後大小,且每個格點都有專屬的下載連結。

格點尺寸如何計算(不遺漏任何像素)

切割器使用依比例座標計算的整數邊界,因此相鄰格點能精準對齊,且每個來源像素都歸屬於某一格點。對於可整除的乾淨影像,結果一目了然:1200 × 900 的來源切割為 3 列 4 行後,會產生 12 個格點,每個均為 300 × 300 像素。計算方式為 1200 ÷ 4 = 300 像素寬、900 ÷ 3 = 300 像素高,並在 4 × 3 的網格中重複套用。

不均勻的尺寸會刻意處理,而非四捨五入為誤導性的統一尺寸。將 10 像素寬度切割為四行時,會產生 2、3、2、3 像素的寬度:最寬與最窄的格點最多相差一個像素,四個寬度加總恰好為 10,不會丟棄任何狹窄的區段。高度亦套用相同規則。這在原始影像的單一像素列或行可能被靜默捨棄或重複複製時尤其重要——兩種情況都會破壞像素級精準重建。

檔案限制、格式與影像的處理方式

此切割器接受 JPG、PNG 與 WebP 檔案,因為這些是瀏覽器無需額外程式庫即可解碼的格式。輸入上限為 25 MiB 與每邊 20,000 像素,總計 40 百萬像素。來源透過 File API 讀取,繪製至符合原始像素尺寸的離屏畫布上,再次編碼為 PNG,使每個格點保留銳利邊界與任何來源透明度。由於 JPEG 與 WebP 來源會被解碼並重新編碼為 PNG,即使可見像素區域完整保留,原始中繼資料與壓縮位元組仍無法保留。

屬性行為
接受格式JPG、PNG、WebP(瀏覽器可解碼)
檔案大小限制每個來源檔案 25 MiB
解碼後尺寸每邊最多 20,000 像素,總計 40 百萬像素
網格範圍1–10 列 × 1–10 行,最多 100 個格點
輸出格式僅 PNG
格點命名原始基本名稱加上列與行(例如 photo-row-2-column-3.png)
處理位置目前瀏覽器分頁,無上傳

無效類型、空檔案、解碼失敗、畫布支援不可用、無效網格值與 PNG 編碼失敗會產生明顯錯誤,而非部分或虛假的成功輸出。更換來源或任一網格值會使先前結果失效,任何暫時性的瀏覽器 URL 在被取代或工具關閉時會被撤銷。

免 Photoshop 與 Photoshop 之比較:選擇合適的工具

對於無出血、無間距、無自訂輔助線的均勻列×行網格,瀏覽器式網格切割器速度更快、成本更低,且更容易還原(每個格點都有命名,皆為全解析度)。對於印刷生產、非矩形佈局、重疊切片,或混合不同格點大小的網格,Photoshop 這類支援手動切片位置的編輯器仍有用武之地。了解哪項任務適合哪種工具,才能維持工作流程效率,而非將每項任務都拖入同一個重量級編輯器。

情境更合適的工具原因
Instagram 3×3 分割、均勻網格、編號輸出Image Grid Splitter將列與行設為 3,下載九個編號的 PNG
格點之間的自訂出血或間距Photoshop 或排版編輯器瀏覽器切割器不添加出血或填補
非矩形或手動放置的切片Photoshop瀏覽器切割器僅套用均勻網格
來源必須保持私密且不上傳Image Grid Splitter解碼與編碼皆在分頁本地執行
每個格點的批次 ZIP 匯出Photoshop 或封裝腳本此工具提供個別下載連結,而非 ZIP

網格切割器不足以因應的時候

如果您的專案需要 Photoshop 率先推出的功能——印刷出血標記、手動放置的輔助線、重疊格點或混合格點大小——瀏覽器工具無法取代編輯器。此切割器圍繞單一任務打造:將單一矩形影像切割為由命名 PNG 組成的矩形網格。對於印刷生產、具有自訂間距的社群網路範本,或具有手動定位輔助線的網格,請使用支援手動切片位置的工具。此權衡是刻意的:透過保持精簡,工具能確保每個來源像素完整保留一次、相鄰格點無縫對接,並能透過計算列數與行數預測輸出。

實際應用案例:Instagram 3×3 貼文

人們搜尋網格切割最常見的原因,就是經典的 Instagram 三乘三貼文——將一張正方形影像以閱讀順序發布為九個獨立格點,使其在個人檔案網格中重新組合。使用 Image Grid Splitter 時,開啟來源正方形,將列與行皆設為 3,然後下載九個編號的 PNG。依序上傳 photo-row-1-column-1photo-row-3-column-3,個人檔案網格就會將其拼接回原始影像。若來源為 1080 × 1080 正方形,每個格點會輸出為 360 × 360;若為 1081 × 1081 正方形(少見但可能發生),切割器會產生每列或每行相差一個像素的格點,確保不遺漏任何資料。同一工作流程亦適用於更寬廣的全景長網格,或解析度更高的社群範本小格點。

如果您正在權衡選項,如何將影像分割為 Instagram 貼文網格對此有詳細說明。

如果您正在權衡選項,免 Photoshop 取得影像佔位符對此有詳細說明。