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

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

1、什么是切图？

html5切图扫盲之web前端讲的切图到底是什么 Python

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

切出素材

编写代码实现

2、为什么要切图？

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

html: <img src=\公众\"大众 alt=\"大众\公众&gt;

3、如何切图？

利用 PS 工具

利用背景图

图片合并方案

浏览器兼容

4、都须要切哪些图？

润色性，用在 css 里，icon、logo、有分外效果的按钮和笔墨

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

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

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

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

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

-----

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