图片是影响网站打开速度的最大因素，所以现在在做网站的时候会运用到很多技巧，来使网站能够带给访客良好的体验，其中就要运用到图片切片的技巧。
什么是切片？
做网站中切片就是：将一副大图像，分割成一些小片的图像切片，然后在页面中通过没有间距和宽度的表格，重新将这些小图像没有缝隙的重新拼接放在一起，再作为一幅完整的图像。
网站中使用切片有什么好处？
制作动态效果
利用切片可以制作出各种交互效果，如翻转图像等。
图文分离
做到图文分离，文字和图片分开访客可以自主选择网页中的图片和文字。
减少页面下载时间
减小图像的大小，减少页面的下载时间。
外人说：
切图就是把图片切碎
百度说：
切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面。
通俗来讲，把一张设计图 利用到切片工具 把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。
切图大家都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，把图片切出来这个过程是叫切片。
切图的目的：第一个是让网页稿有了交互性，实现你平时看到的各种各样的功能。
第二个是体积，所以切图时候一定注意少用图片工具：主流是dreamweaver，也有公司自己开发平台进行制作的。
采用div+css布局更能减小网页体积 是表现与内容分离。
知乎说：
我理解的网页设计中的切图，有三个境界：
能把所有设计稿里出现的图形元素按照基础要求切出来交给前端工程师。
对所有切图进行优化，有针对图片输出体积的优化、有利用 CSS Sprite 减少请求的优化、也有针对减少自己后期网站改版升级时候工作量的优化。这部分已经需要很多前段方面的知识了。要让切图也「语义化」必须得和前段配合得很好。
从超出「图片」的角度思考并且实现更高阶的效果，比如现在做网页经常需要考虑桌面和移动平台的不同分辨率，使用 Responsive 的布局的话切图应该怎么切，是不是需要切两套；遇到 iPad 或者 rMBP 的高清屏怎么处理网页中的图片以及背景；是否可以应用一些新的技术比如 Web Font、Font Icon、CSS 3 里的新特性来减少网页里的图片等等
新手说：
切图太简单，小儿科
老手说：
在零几年的时候我们把前端叫做切图。
微信扫一扫 