但是，当图片很多时，这种方式不仅会伤害设计师的双手，也会因为大量的资源请求导致网页打开速度下降。这时候，雪碧图的优势就体现出来了，雪碧图本质上就是将众多图片拼贴为一张作为背景图片引用。
在详细介绍雪碧图之前，先说说背景图片的概念。前端在构建网页结构时，会使用很多的块元素堆叠嵌套，比如大标题<h1 >、段落<p >、图片<img >等，图片标签<img >就是将图片引用进来直接显示，而背景图片则是给<h1 >等元素的背景设置为图片。就好比给电脑设置背景图片，你可以控制它是自适应还是原始大小，重复或者不重复，同样地在网页中每个块元素的背景图片，可以控制它的适应方式、是否重复以及显示位置等。
当我们给一个元素设置固定大小，让它的背景图片位置进行变化，就好像显示出了不同的图片，这就是雪碧图的原理，有点类似ps里的创建剪切蒙版。下图左边就是网易云音乐的一张雪碧图，右侧就是用剪切蒙版演示的雪碧图原理。
一般来说，在某一模块（比如一个播放器）需要的图片很多而每张图片又不是很大时，可以考虑切成雪碧图交给前端。但目前很多前端构建工具里面有雪碧图合并功能，所以如果前端使用了构建工具可以把合并的功能交给前端。
雪碧图还有一个妙用，那就是替代gif。设计师都知道，透明背景的gif动图在导出时回带有毛边，在颜色反差很大的背景色上更明显。因此，可以考虑将多帧图片横向排列，以雪碧图的形式每隔固定时间改变背景图片的位置，因为本质上还是png图片，所以毛边的情况就可以解决了。可以参考我之前的文章： 透明背景gif图的锯齿是个什么鬼？ 。
那么问题来了，为什么叫“雪碧图”呢？叫“可乐图”、“芬达图”、“王老吉图”不行吗？这个，我也不知道。
ThingJS 基于 HTML5 和 WebGL 技术，可方便地在主流浏览器上进行浏览和调试，支持 PC 和移动设备。ThingJS为可视化应用提供了简单、丰富的功能，只需要具有基本的 Javascript 开发经验即可上手。
ThingJS
提供了场景加载、分层级浏览，对象访问、搜索、以及对象的多种控制方式和丰富的效果展示，可以通过绑定事件进行各种交互操作，还提供了摄像机视角控制、点线面效果、温湿度云图、界面数据展示、粒子效果等各种可视化功能。
ThingJS提供如下相关组件和工具供用户使用：
CityBuilder：聚焦城市的 3D 地图搭建工具，打造你的 3D 城市地图。
CamBuilder：简单、好用、免费的 3D 场景搭建工具。
ThingPano：全景图制作工具，轻松制作并开发全景图应用，实现 3D 宏观场景和全景微观场景的无缝融合。
ThingDepot：上万种模型，数十个行业，自主挑选，一次制作多次复用。
