給設計師與前端：雪碧圖能減少請求，但座標、倍率與壓縮任一環節出錯，就會在 Retina 或瀏覽器縮放下「裂一條線」。本文用可執行參數與驗收標準對齊交付。像素網格與自動版面匯出細節可交叉參考 Figma 自動版面 PNG 像素對齊清單；向量轉點陣倍率見 SVG→Retina PNG 矩陣；批量質檢流程見 OpenClaw PNG 批量 QA。
雪碧圖匯出參數
先釐清邏輯像素（CSS px）與資產倍率：母稿在 1× 網格上排版，匯出 @2x／@3x 時，雪碧圖總寬高須為單格尺寸×格數×倍率後仍為整數。
| 交付型態 | 適用情境 | 設計約定（驗收） |
|---|---|---|
| 單張 PNG 雪碧圖 | 圖示固定、樣式少變、需極少請求 | 格線對齊；格間預留≥1px透明緩衝（@1× 基準再乘倍率）；sRGB 內嵌；禁止半格偏移 |
| 多張倍圖（@1x／@2x／@3x） | 需精控 1× 銳利度或分 CDN 規則 | 三組檔名與 manifest 標註 scale；同一座標表適用，僅資產尺寸變 |
| 獨立 PNG／SVG | 大量狀態、主題換膚、動態尺寸 | 以元件庫與快取策略取代雪碧；若仍混用，文件註明哪些圖層不進雪碧 |
可執行步驟：① 在設計工具開啟像素預覽，凍結框架為整數寬高；② 匯出 PNG-24（需透明）或依品牌規；③ 記錄每格 x,y,w,h（1× 邏輯值）；④ 產出 [email protected] 等並寫入交付 README。
驗收：隨機抽 3 格，以放大鏡檢查與鄰格邊界無色彩汙染；透明區無雜邊；檔案具 sRGB ICC 或書面豁免。
@2x／@3x 與像素對齊
前端若以 background-size: [雪碧邏輯寬]px auto 配合 background-position: -x -y，則 x,y 必須與未縮放前的 CSS 像素座標一致；倍圖檔的實際像素寬度應為邏輯寬×dpr。
- 整數鐵律：1× 網格上的
x,y,w,h全為整數；@2x 資產上對應像素皆為偶數倍，避免半像素採樣。 - 子像素：自動版面、小數縮放關閉；圖示置於整數座標，陰影勿壓在格線上（易切出灰邊）。
- 驗收：在 Chrome DevTools 裝置列選 iPhone／Android DPR 2–3，與設計稿 overlay 差異≤0.5px 可接受範圍內須無累積錯位。
批處理命令或工具參數表（遠端 M4）
建議目錄：inbox/sprites/、out/opt/、logs/qa.jsonl。長時間跑壓縮與巡檢可放在遠端 Mac mini M4，避免本機睡眠中斷。
| 工具 | 用途 | 建議參數／備註 |
|---|---|---|
sips |
讀寫寬高、嵌入描述檔 | sips -g pixelWidth -g pixelHeight -g profile file.png；必要時 sips --embedProfile /path/sRGB.icc |
ImageMagick magick |
合併格子、裁切驗證 | 拼版：magick montage cell*.png -tile NxM -geometry +0+0 -background none sheet.png；裁單格：magick sheet.png -crop WxH+X+Y +repage one.png |
pngcheck |
結構完整性 | pngcheck -v file.png；CI 中非 0 即阻擋合併 |
oxipng |
無損壓縮 | oxipng -o 4 --strip safe *.png；確認未誤刪所需 ICC（必要改 --strip 策略） |
批處理驗收閾值（建議寫入 manifest）：實際寬高＝預期±0px；pngcheck 通過；壓縮前後像素內容一致（可抽樣 magick compare -metric AE）；單一雪碧檔位元組 < 專案上限（例如 800KB／2MB 分環境）。
跨螢幕預覽驗收
- 瀏覽器：Safari 與 Chromium 各驗一次；系統顯示縮放 100% 與 125% 各驗一次。
- 對照物：設計稿匯出 PNG overlay 或紅線稿，檢查圖示基線與文字對齊。
- 通過標準：無 1px「漏光」、無圖示邊緣色帶；hover／active 狀態切換時座標與視覺中心不跳動。
- 回歸：任一格座標或母稿改版，重跑 CLI 表並更新
coordinates.json版號。
FAQ
雪碧圖座標可以用小數嗎？
不建議。請用整數 px；Retina 下小數易與 transform: translate 或 subpixel 合成疊加，產生週期性模糊。
只給 @2x，不給 @1x，可以嗎？
可以，但須前端以 background-size 對齊邏輯尺寸，並在驗收清單中明列 1× 螢幕抽查項。
雪碧圖還值得做嗎？
HTTP/2 與 SVG 普及後，純請求數優勢下降；若維護成本高，優先評估SVG 或 icon font 替代方案，雪碧圖作為過渡或低頻頁面選項即可。
若需要長時間在線的 Apple Silicon 專機跑批處理與 QA，可到 首頁 了解方案；免登入可查 購買／租用、節點與定價；接入與環境見 使用說明與幫助。更多文章見 技術見解。