注：本篇文章基於HTML5/CSS3，較少考慮瀏覽器相容性（相容性查詢可以見caniuse.com網站），需要讀者注意。

前端開發≠切圖，但前端開發需要會切圖，切圖是銜接PSD與HTML靜態頁面的橋樑。作為需要涉獵前端的後端工程師，在切圖中需要掌握如下的知識：

如何評價切圖切的好

切圖質量的好壞評價可以從如下幾個方面來判斷：

1. 業務角度：製作完的HTML網頁還原度高，甚至做到畫素級還原；
2. 技術角度：圖片體積小（減少網路傳輸）、圖片數量少（減少請求數量）；
3. 配合角度：便於後續製作HTML，特別是製作自適應螢幕的網頁。

要不要切

一般來說，圖片總是比字元形式的HTML/CSS體積大，因此總體原則是能用HTML/CSS實現的就不切圖。常見的比如：

1. 純色背景色：用CSS2的background-color來實現；
2. 漸變背景色：用background-image配合CSS3的漸變屬性（線性漸變linear-gradient、徑向漸變radial-gradient）來實現；
3. 邊框顏色：用CSS2的border-color來實現，另外邊框線型可以用border-style實現，如果邊框顏色特別花哨甚至有精妙的圖案（我是沒有見到過），那就只能用圖片加border-image來實現；
4. 背景投影/陰影：用CSS3的box-shadow實現，可以實現不同樣式顏色的陰影；
5. 橢圓等不規則圖形：這個難度相對較大，用CSS3的圓角（border-radius）、變換（transform）來實現，當然我個人對於一些圖示喜歡用SVG來做，SVG的語法和CSS、HTML極其類似，入門學習（http://w3school.com.cn/svg）一小時左右即可。

要切多大，是否合併

從網頁體積來看，切圖必然是切得小一些更好，比如能切1畫素寬然後repeat的，就不要切出一長條。重複的圖形能切一個迴圈，就不要切n個迴圈。圖片越小，儲存量越小，對網路的負擔也相應會小。

但是如果一堆小圖片在一個網頁中載入，會產生大量的HTTP請求，從而拖慢網頁載入速度，這時候就需要考慮把小圖片合併為大圖片，只進行一次載入。這種圖片適合用CSS的background進行載入，並用background-position對圖片裡的具體圖示進行定位，如：.div{ background:url(abc.jpg) no-repeat -30px -50px;}。

但具體怎麼切，其實還需要看網頁佈局，因此切圖和HTML靜態頁面製作不能割裂開來，否則切的圖和靜態頁面不在一個頻道上，會導致返工。

切圖工具的操作

常用的切圖工具比如Photoshop（收費）、GIMP（免費），Photoshop的基本操作基本是每一個切圖人員必備知識。

對於切圖來說，Photoshop最常用的技能就是圖片放大（Ctrl++）、縮小（Ctrl+-）、圖層選擇（F7調出圖層皮膚）、區域寬度高度的判斷（F8調出資訊皮膚）、取色（快捷鍵：I）等。對於這些功能的使用，可以自行百度。

圖片格式的選擇

常見的網路圖片格式有：JPG/JPEG、GIF、PNG、SVG，對於這些圖片格式的比較如下表（每種格式不考慮同種格式版本的差異）：

一般來說SVG格式的體積最小，但是IE僅IE9及以上原生支援。

如果有動畫，那麼考慮GIF或SVG，SVG本身除了一些類似CSS3的動畫控制，還能用JS進行控制。
對於圖片的顏色，如果僅僅少量顏色，那麼GIF有很大的優勢，甚至有時單色/雙色GIF體積能小至10位元組左右。如果顏色繁多且需要透明，那麼考慮PNG。如果不透明，那麼需要考慮顏色細膩程度，如果過於細膩那麼JPG在有失真壓縮時會丟失細節，而無失真壓縮時又體積過大。

上述原則有時候不能一概而論，經常需要把圖片存成多種格式、多種顏色位數進行實際比較，在色彩和體積之間找到一個平衡點，其中每張圖片儘量不要大於100kB。