切圖在現代前端工程中的定位

傳統流程：設計稿 → 切圖 → 靜態 HTML → 套入 CMS。現代工程：設計系統 → 設計令牌 → 組件庫 → 自動化構建。切圖不再是「切圖」，而是視覺資產標準化輸出的關鍵環節。掌握核心原則，直通高性能交付。

黃金法則：能用 CSS 實現的，絕不切圖

• 純色/漸變背景：background: linear-gradient() / background-color。
• 圓角/陰影/邊框：border-radius / box-shadow / border。
• 三角形/幾何圖形：clip-path / border hack / SVG。
• 圖標：SVG Sprite / Icon Font / Unicode，拒絕 PNG/JPG。

收益：減少 HTTP 請求、零縮放失真、動態主題切換零成本、動畫可控、原始碼可維護。

必切圖場景與最優導出策略

場景	格式	優化策略	命名規範
照片類（Banner、產品圖、人物）	WebP (首選) / AVIF / JPEG (fallback)	響應式多尺寸（w_320,w_640,w_1280,w_1920）、質量 75-85、loading="lazy"	banner-home-hero@1x.webp
插畫/圖標/UI 元素（透明背景）	SVG (首選) / PNG-8	SVGO 壓縮、移除無用屬性、合並 Sprite、viewBox 標準化	icon-user-active.svg
複雜漸變/噪點/紋理背景	WebP / JPEG	最小重複單元切片 + background-repeat，或 CSS mask-image + SVG 紋理	bg-noise-diagonal@2x.webp
簡單動畫	WebP 動畫 / Lottie JSON / CSS Animation	優先 CSS/JS 實現；必須圖序列時用 WebP 動畫（比 GIF 小 60%+）	loader-spinner.webp

圓角/邊框/漸變混合元素的切圖技巧

• 九宮格切圖：四角圓角 + 四邊拉伸區 + 中心填充區 → 9 張小圖合並為 1 張 Sprite，CSS background-position 定位。
  
• 現代替代：border-image-slice / border-radius + background-gradient + box-shadow 純 CSS 實現，零圖片。

圖片壓縮與性能紅線

• 嚴禁：上傳原圖 → 用 width/height 強制縮放 → 瀏覽器下載原圖再縮放 → 浪費頻寬 + 失真 + 白屏閃爍。
• 標準：內容區圖片寬度 ≤ 容器最大寬度（通常 1200-1920px），高度等比。CMS 上傳自動觸發多尺寸生成 + WebP 轉換 + CDN 分發。
• 工具鏈：ImageMagick / Sharp / Squoosh / Imagemin + Webpack/Vite 插件自動化。

資產命名與管理：給未來的自己留條活路

• 語義化命名：[模組]-[元件]-[狀態]@[倍率].[格式]，例：header-logo-hover@2x.svg、product-card-img@1x.webp。
• 目錄結構：/assets/images/[module]/[component]/。
• 版本控制：設計稿與導出資產同步進 Git LFS / Figma Branches / Abstract，變更可追溯。

交付清單（Definition of Done）

1. 所有圖片已壓縮優化，體積達標。
2. 所有 SVG 已經 SVGO 優化，移除編輯器殘留屬性。
3. 響應式圖片集完整（1x/2x/3x 或 w 描述符）。
4. 命名符合團隊規範，目錄結構規範。
5. 提供 manifest.json 或設計令牌映射表，前端直連無需二次處理。

切圖不是體力活，是「視覺語言向代碼語言翻譯」的精準工程環節。好切圖，是高性能、易維護、可擴展前端架構的基石。