作为一个web前端初学者，对于html5、css3、jquery、w3c、前端、切图、hack、雪碧图等这些关键词一定会比较多见到，其中切图到底是指的什么？很多初学者都会搞错，在网页三剑客那会儿，没有前端的说法，切图是指将psd还原成html的过程，有点类似蹴鞠（切图）和足球（前端）的意思。

以下来自知乎的QA式解答，很通俗

1、什么是切图？

切图就是将.psd设计稿还原成Web页面的过程，这个过程包括两部分：

切出素材

编写代码实现

2、为什么要切图？

没有人可以直接把一整张图片引用页面，当作Web页面的。切图的主要目的就是给网页提供图片素材，可以让你从html或者css里引入图片。

html:imgsrc=""alt=""

3、如何切图？

使用PS工具

使用背景图

浏览器兼容

4、都需要切哪些图？

修饰性，用在css里，icon、logo、有特殊效果的按钮和文字

内容性，用在html里，Banner、广告图片、文章配图

5、切出来的图片保存为哪种格式？

修饰性的保存为png24（支持半透明），png8。内容性的保存为jpg。

6、有哪些可以学习的切图教程

建议可以参考一下慕客网和网易云课堂的前端切图部分。

-----

由只教web前端实战的，切图学院（）整理。