認識切片工具：網頁圖片優化的關鍵利器

在網頁設計早期，為了縮短頁面載入時間，設計師習慣將大圖拆解成多張小圖再拼合呈現。這項技術稱為「切片」，至今仍是切版流程的基礎功夫。Photoshop 內建的切片工具（快捷鍵 K）能將單一畫布依據版型需求，精準切分成獨立圖檔，並可在「存儲為 Web 所用格式」時一次匯出所有切片，大幅簡化前端整合工作。

核心操作流程四步驟

1. 建立切片：選取切片工具，在畫布上拖曳出矩形區域；或使用「切片選擇工具」右鍵選單中的「劃分切片」，依指定列數、行數自動均分。
2. 編輯切片選項：雙擊切片可命名、設定 URL、替代文字、目標視窗等屬性，方便前端直接套用。
3. 調整與對齊：啟用「對齊到參考線/網格」，確保切片邊緣像素級精準，避免拼圖時出現 1px 縫隙。
4. 批次匯出：按 Ctrl+Alt+Shift+S 開啟「存儲為 Web 所用格式」，按住 Ctrl 點選需導出的切片，右側面板統一設定格式（JPEG/PNG/GIF）、品質、是否輸出到 images 子資料夾，最後點擊「儲存」即可。

常見問題與解決技巧

• 尺寸微幅偏移：匯出後尺寸偶爾出現 250.1×200 等小數，屬正常浮點運算誤差，網頁呈現不受影響；若專案要求嚴格整數，可在切片選項手動修正寬高。
• 自動產生 Images 資料夾：匯出對話框底部取消「將圖片存進 Images 文件夾」勾選，即可直接輸出至指定目錄。
• 切片重疊與空白：使用「切片選擇工具」檢查每一切片邊界，必要時以參考線輔助對齊。

進階應用：回應式切圖策略

現代網頁多採用 srcset 與 picture 標籤提供多倍圖。建議在 PS 中依 @1x、@2x、@3x 分別建立對應切片組，命名規範如 hero@2x.jpg，匯出後配合建構工具自動產生回應式標記，兼顧效能與視覺品質。

掌握切片工具不僅能加速切版，更能確保設計稿與前端成品像素級一致。下次切版前，先花幾分鐘規劃切片邏輯，後續整合將順暢許多。