在高举“用户体验”为中心的网络时代，你是否因为打开网页速度太慢而封闭网页呢?相信很多人的谜底都是必定的。在高速的网络时代，千万不要挑战广东网民的耐心，不然只会致使网民远离你的网站而去。

网页提速有很多的体例，其中一条就是削减http请求。每一个网站城市用到图片，当一个网站有10张伶仃的图片，就意味着在阅读网站时会向办事器提出10次http请求来加载图片。下面为年夜家介绍削减图片请求的体例。

css sprites：网站前端开辟者年夜多称之为“css精灵”，通俗的理解就是：将多张小图片合成为一张年夜图片，削减http请求次数而达到网页提速。下面以淘宝网为例子，为年夜家讲授下css sprites是如何实现的。如我们要在网页上显示“本日淘宝勾当”这个图片。

实现代码：

<div style="width:107px; height:134px; background:url(sprites.gif) no-repeat -133px -153px"></div>

width：要定位图片的宽度。height：要定位图片的高度。(css sprites必须定义容器的年夜小，不然会显示出错)

background：url(sprites.gif)布景图片的路径。 no-repeat：布景不重复。 -133px：X坐标的位置 ，-153px：y坐标的位置。

可能有人会不明白这个-133px 和-153px是怎么来的，这个坐标是小图片在年夜图片中的x坐标和y左边坐标，如下图，红色点的坐标是在年夜图上x坐标为133px y坐标为153px。(坐标也可以用百分比暗示，如：50% 50%)有人会提出，为什么坐标是正数，你却写成了负数呢?因为用background这种体例定义布景图片，默认x y坐标是0 0。如下图本日淘宝勾当图片的坐标是133px 153px，所以要用-133px -153px来归零才能正确的显示图片。

css sprites的优点：可以削减http的请求数，如10张伶仃的图片就会发出10次的http请求，合成为一张的年夜图片，只会发出一次的http请求，从而提高了网页加载速度。

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

css sprites有优点也有缺点。要不要使用，具体要看网页以加载速度为主仍是以维护便利容易为主。