注：本篇文章基于HTML5/CSS3，较少考虑浏览器兼容性（兼容性查询可以见caniuse.com网站），需要读者注意。
前端开发≠切图，但前端开发需要会切图，切图是衔接PSD与HTML静态页面的桥梁。作为需要涉猎前端的后端工程师，在切图中需要掌握如下的知识：
如何评价切图切的好
切图质量的好坏评价可以从如下几个方面来判断：
- 业务角度：制作完的HTML网页还原度高，甚至做到像素级还原；
- 技术角度：图片体积小（减少网络传输）、图片数量少（减少请求数量）；
- 配合角度：便于后续制作HTML，特别是制作自适应屏幕的网页。
要不要切
一般来说，图片总是比字符形式的HTML/CSS体积大，因此总体原则是能用HTML/CSS实现的就不切图。常见的比如：
- 纯色背景色：用CSS2的
background-color来实现； - 渐变背景色：用
background-image配合CSS3的渐变属性（线性渐变linear-gradient、径向渐变radial-gradient）来实现； - 边框颜色：用CSS2的
border-color来实现，另外边框线型可以用border-style实现，如果边框颜色特别花哨甚至有精妙的图案（我是没有见到过），那就只能用图片加border-image来实现； - 背景投影/阴影：用CSS3的
box-shadow实现，可以实现不同样式颜色的阴影； - 椭圆等不规则图形：这个难度相对较大，用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，对于这些图片格式的比较如下表（每种格式不考虑同种格式版本的差异）：
| JPG/JPEG | GIF | PNG | SVG | |
|---|---|---|---|---|
| 透明度 | × | √ | √（24位时不支持） | √ |
| 矢量 | × | × | × | √ |
| 颜色 | 24位 | 256色（索引色） | 8、24、32位（索引色） | RGB等各种色表 |
| 压缩 | 有损/无损 | 无损 | 无损 | 无损 |
| 压缩率 | 可调节 | 网络传输时可用文本的压缩方式压缩 | ||
| 动画 | × | √ | × | √ |
一般来说SVG格式的体积最小，但是IE仅IE9及以上原生支持。
如果有动画，那么考虑GIF或SVG，SVG本身除了一些类似CSS3的动画控制，还能用JS进行控制。
对于图片的颜色，如果仅仅少量颜色，那么GIF有很大的优势，甚至有时单色/双色GIF体积能小至10字节左右。如果颜色繁多且需要透明，那么考虑PNG。如果不透明，那么需要考虑颜色细腻程度，如果过于细腻那么JPG在有损压缩时会丢失细节，而无损压缩时又体积过大。
上述原则有时候不能一概而论，经常需要把图片存成多种格式、多种颜色位数进行实际比较，在色彩和体积之间找到一个平衡点，其中每张图片尽量不要大于100kB。
