码迷,mamicode.com
首页 > Web开发 > 详细

使用雪碧图Css Sprite精灵 | 加速网页响应速度

时间:2018-02-28 18:56:03      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:计算   个数   css   规格   gpo   在线生成   需要   更换   客户   

什么是CSS Sprite精灵?

是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片。Css Sprite它允许你将一个页面涉及到的所有零星图片都包含到一张图中,这样一来,当访问页面时,就只需要下载1张图片了,这显然大大减低了服务器请求压力。

这个技术加速网页响应速度,加速的关键,不是降低质量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。


什么是雪碧图?

雪碧图就是许多在网页中需要的小图片被合并到了一张图片当中,那么这张图片就叫雪碧图,例如:

技术分享图片

可以用来合并动画帧等用途,最多常在网页游戏中应用


如何毫不费力的制作雪碧图并加以使用?

技术分享图片

前往Css Sprites在线工具地址:https://www.toptal.com/developers/css/sprite-generator

将需要的图片导入到在线网页工具中,就会自动生成雪碧图,如下图

技术分享图片

可以看到在线工具自动生成了雪碧图你可以点击下载,然后还生成了css样式,会基本网页的你就应该自然会用了

我们下载生成的雪碧图得到如图:

技术分享图片


使用后的效果案例:

技术分享图片

案例来自:http://mc.163.com/index.html 我的世界官网

并非本人开发,我只是拿这个作为例子。


Css Sprite原理:

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。


雪碧图使用总结

优点

  • 利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;

  • CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

  • 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。

  • 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

假如不使用这个在线生成工具,那么将是及其的麻烦,当然这也是全职开发者必备的工具

 

使用雪碧图Css Sprite精灵 | 加速网页响应速度

标签:计算   个数   css   规格   gpo   在线生成   需要   更换   客户   

原文地址:https://www.cnblogs.com/zytrue/p/8485178.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!