网站的打开速度既影响用户体验，又影响蜘蛛的抓取，而我们经常会看到一些网站有大量的图片、图标，但有的打开快，有的打开慢。那么一个网站的打开速度几秒才不会让用户感到烦恼？我们应该从哪些方面去优化页面的打开速度？下面为大家介绍一下网站前端设计的切片原则。

一、切片是什么意思？

切片就是从效果图上把我们需要的图片或图标进行剪切处理。切片通常在PS中进行，PS切片是Photoshop中的一个切图工具，快捷键是C（注：C键有多个工具，但可以用Shift+C进行工具的切换）。

二、切片的作用

作用是用来将大图片分解为几张小图片。现在的网页中图文并茂，也正因如此打开一个网页所须的时间就比较长，为了不让浏览网页的人等等时间太长，所以我们要将图片切为几个小的来组成。方便网页里面的排版。例如安然SEO博客首页上的导航就是一个一个的小切片组成。并且排列整齐，美观精致。

12.jpg (11.04 KB, 下载次数: 0)

下载附件

切片

2013-12-5 00:59 上传
再比如说上图中两条很长的灰色线条，我们就只需要截取红框里很上的一部分，然后利用CSS来控制长度就可以，这样大大减小了图片的所占的内存。

三、切片的优势

1、浏览器显示的是直观图片，整体效果。人为去用代码拼接图片，容易会出现图片错位，影响整体显示效果。运用ps切片自动生成的代码，一般不会出现图片错位。

2、浏览网页的时候，页面打开的速度受图片大小的影响很大，把一张大图切成多张小图，可以加快图片的显示速度。

3、一张图片有多个链接可以用切片切开，分开做链接。

总结：网站的图片必须遵循一个原则：要多大切多大。尽可能的把加载速度降低，能快0.1秒就不要慢0.1秒。研究显示，如果等待12秒以后，网页还是没有载入，那么99%以上的用户会关闭这个网页，不再等待。所以切片在我们的网站优化中也是非常重要的一个环节，直接影响到用户的体验和蜘蛛的抓取。

本文由安然SEO原创，转载请注明出处：http://loudiseo.net