什么是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张图片的字节总和。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

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

转载于:https://www.cnblogs.com/zytrue/p/8485178.html

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

No.006 雪碧图CSS Sprite
雪碧图CSS Sprite 1. 名称由来 2. 使用目的 3. 实现注意 (以下所有内容仅用以记录学习过程中的个人理解,如有错误欢迎指出) 1. 名称由来为什么叫雪碧图呢?因为常喝的雪碧的英文名称 ...
html css雪碧图,css sprite css雪碧图生成工具
什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...
html css雪碧图,css常见小技巧（雪碧图）
1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用 ...
JAVA自动生成雪碧图sprites和样式CSS文件（包含原始图标CSS、雪碧图CSS）
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
shoeBox超实用的雪碧图（Sprite）图制作工具-使用shoeBox
shoeBox超实用的雪碧图(Sprite)图制作工具-使用shoeBox 从前端优化说起浏览器载入单张图片的速度基本取决于图片的大小,但是载入多张图片的速度却和另一个要素息息相关-网络请求数,在图 ...
三分钟学会如何使用css雪碧图（Sprite）
一. 先分析一下名字(有没有人跟我一开始一样疑惑为啥叫这名) Sprite 英文小精灵的意思,Sprite又叫小精灵图,恰好呢某绿瓶气泡水名也叫sprite,狠狠地撞名-_ ...
雪碧图 css 使用方式与 Js使用方式
效果链接示例雪碧图如下,雪碧图图片资源来源于力扣官网中头像悬浮Dark Side功能. 雪碧图分析:该雪碧图横向为12等分,高度32px 1. JavaScript方式使用雪碧图(猜测力扣使用的方式 ...
shoeBox超实用的雪碧图（Sprite）图制作工具-使用
从前端优化说起浏览器载入单张图片的速度基本取决于图片的大小,但是载入多张图片的速度却和另一个要素息息相关-网络请求数,在图片大小和一致的情况下,图片张数越少其请求数越少其载入速度也就越快.所以在使用 ...
CSS Sprite雪碧图详解
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

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