圖片切割

除不盡的時候，餘數放在哪裡

大部分圖片都不是剛好整除的。一張寬 1000 px 的圖橫向切成 3 等分，每塊要 333.33 px， 但像素沒有小數——所以餘數一定要有地方去。

最直覺的做法是每塊都取整數，剩下的全部丟給最後一塊。1000 ÷ 3 這樣沒問題：333、 333、334。但 1000 ÷ 7 就不行了——前六塊各 142 px，最後一塊 148 px，比鄰居寬了 4%，看起來就像壞掉。

這一頁的做法是把餘數平均分散，一次一個像素地分給前面幾塊。同樣的 1000 ÷ 7 會切成 143、143、143、142、143、143、143。任何兩塊的差距都不會超過 1 px，而且所有塊 加起來一定等於原圖——不會裁掉任何東西，右邊也不會有一列像素憑空消失。

狀態列會直接告訴你是哪一種情況：整除就說整除，不整除就把寬度範圍寫出來。

檔名編號讓它們能排回原樣

每個檔案都以列與行編號，photo-r2c3.png 就是第二列、第三行那一塊。編號會依格數補 零，所以切成 12 行時是 c01 到 c12，而不是 c1 到 c12。

這件事比聽起來重要。沒有補零的話，c10 在幾乎所有檔案管理員、以及所有用字串排序的 程式語言裡都會排在 c2 前面——切好的圖就在這一刻變成拼圖。

格式差在哪裡

PNG 是預設值，也是大面積純色、銳利邊緣或需要透明背景時的正確答案——螢幕截圖、 介面設計稿、sprite sheet、圖表都屬於這類。它是無損的，每一塊就是原本位置上的那些 像素。

JPG 對照片來說檔案更小，但沒有透明度：透明的地方會先被填成白色再編碼。它也會重新 壓縮，所以每一塊都會損失一點畫質，而且救不回來。

WebP 兩者兼具，目前的瀏覽器都讀得到。

什麼時候會用到

• 社群九宮格——把一張圖切成 3×3 或 3×1，分別發佈後在個人頁面上會拼回完整的圖。
• Sprite sheet——把一張圖集切回一張張的單格。
• 大張圖表或地圖，分成好幾張紙列印再拼起來。
• 很長的螢幕截圖，切成方便傳送的大小。

圖片不會離開你的裝置

圖片的解碼、切割與打包全都在這個頁面裡完成。沒有任何上傳，壓縮檔也是在你自己的機器 上、在記憶體裡組出來的。