zoukankan      html  css  js  c++  java
  • 使用雪碧图Css Sprite精灵 | 加速网页响应速度

    什么是CSS Sprite精灵?

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

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


    什么是雪碧图?

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

    前端毫不费力使用雪碧图Css Sprite精灵  |  加速网页响应速度

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


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

    前端毫不费力使用雪碧图Css Sprite精灵  |  加速网页响应速度

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

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

    前端毫不费力使用雪碧图Css Sprite精灵  |  加速网页响应速度

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

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

    前端毫不费力使用雪碧图Css Sprite精灵  |  加速网页响应速度


    使用后的效果案例:

    前端毫不费力使用雪碧图Css Sprite精灵  |  加速网页响应速度

    案例来自: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张图片的字节总和。

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

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

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

     

  • 相关阅读:
    UVA
    [CQOI2018] 社交网络
    UVA
    51nod 1314 定位系统
    51nod 1211 数独
    51nod 1392 装盒子
    51nod1253 Kundu and Tree
    51nod1313 完美串
    51nod1039 x^3 mod p
    51nod1369 无穷印章
  • 原文地址:https://www.cnblogs.com/zytrue/p/8485178.html
Copyright © 2011-2022 走看看