利用css sprites减少图片请求_html/css_WEB-ITnose

sprites是鬼怪，小妖精，调皮鬼的意思，初听这个高端洋气的名字我被震慑住了，一步步掀开其面纱后发觉很简单的东西，作用却很大

什么是CSS Sprites

CSS Sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。

JqueryUI的效果图如下

很多页面常用的小图标，但是我们看看每个小图标的源码的时候会发现，这些小图标的src是同一个文件，都是这张大图

为什么要使用CSSSprites

姑且先不管这是怎么实现的，我们先来了解一下又好好的方法它不用为什么要用这种怪异的方式，在代码书写和可读性上都有了一定程度的开销，这么干有什么好处能让人们放弃安逸的做法来用CSS sprites呢？

浏览器加载图片为阻塞形式

我们知道浏览器在加载网页的时候图片文件及外部的JS、CSS文件都需要单独下载，但JS是堵塞HTML下载进程的，图片是另外开启进程来下载的，不同的浏览器同时下载图片的数量的限制一般为一个或者五个或者十个，所以如果一个遍布了图片的网页，或者一系列网页，即使你网速再快也要分批次的下载这些图片。

图片下载为一次完整的http请求

每个图片的下载都是一次完整的HTTP请求-响应。而把很多小图片集中到一张图片上这样在只需要一个HTTP请求-响应，在现在网速条件下不超过200k的图片下载速度是差不多的，下载一次之后无论是该页面还是站点其它页面使用包含在这张大图上的图片的时候就可以使用缓存，不会带来反复下载的开销，所以只有一个HTTP请求-响应。

Sprites减少HTTP请求

所以使用CSS sprites最大的好处就是减少HTTP请求，加快网站响应速度，提高网站性能。也许会问，多几个HTTP请求真的会那么严重吗？如果使用一张大图，那么很可能大图中有几个图片用不到，这不是多加载内容了吗，和多几次HTTP请求开销差距有那么大吗？

CSS Sprites实现

首先了解一下CSS的 background-position

background-position设置或检索对象的背景图像位置。必须先指定 background-image属性。

语法：

background-position: length || length

background-position: position || position

取值：

length :百分数 |由浮点数字和单位标识符组成的长度值。

position :top | center | bottom | left | center |right

如： /* states and images */.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }/* positioning */.ui-icon-carat-1-n { background-position: 0 0; }.ui-icon-carat-1-ne { background-position: -16px 0; }

我们看到使用的url为同一个图片，知识postion时，图片的锁定位置有变动。

小结：

CSS Sprites的缺点：凡事有利必有弊端。可能有人喜欢，有人不喜欢，因为每次图片改动都要往这张图片添加内容，图片的坐标定位要很准确会，会稍显繁琐。坐标定位要固定为某个绝对值，因此会失去如center的一些灵活属性。

CSS Sprites 有优点也有缺点。要不要使用，具体要看网页以加载速度为主还是以维护方便容易为主。

版权声明：本文为博主原创文章，未经博主允许不得转载。