shoeBox超实用的雪碧图（Sprite）图制作工具-使用shoeBox

最新推荐文章于 2024-09-02 17:55:07 发布

Merlin~

最新推荐文章于 2024-09-02 17:55:07 发布

阅读量1.9w

点赞数 16

分类专栏： css html js 文章标签：浏览器图片前端优化 shoeBox

本文链接：https://blog.csdn.net/qq_25804071/article/details/76796012

版权

js 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

shoeBox超实用的雪碧图（Sprite）图制作工具-使用shoeBox

从前端优化说起

浏览器载入单张图片的速度基本取决于图片的大小，但是载入多张图片的速度却和另一个要素息息相关-网络请求数，在图片大小和一致的情况下，图片张数越少其请求数越少其载入速度也就越快。所以在使用各种小图标或者小图片时尽量使用一张雪碧图来代替是加快页面载入速度的一种很好的解决方案。

但是雪碧图制作困难

所谓雪碧图就是将无数张图片通过约定的间距合成一张图片，在使用css或者img或者其他手段调用，根据其位置编制只显示对应单图片。首先一般使用的软件是很大众的PS，一张一张拼起来，而且还要注意固定间距，大小图放在一起的时候如何排放，等，制作完了还要编写对应的css代码或者js代码来使用这张大图里面的单张小图。其工作量是非常大的，而且这种机械化的工作很容易让人烦躁。所以一个解放我们双手和心灵的神神器降生了，他就是shoeBox。

如何使用shoeBox

首先打开以下网址并下载并安装

shoeBox
这里写图片描述

安装如果遇到问题一般是没用装adobe AIR Runtime去下面链接下载安装

adobe AIR Runtime
然后再安装一便。

如何使用

使用方法再简单不过了
只需要将你要转化的多张图片拖放到对应位置就行了

这里写图片描述
拖放完之后是展示页面点击设置

设置你的选择

Basic基础设置栏目里
template是选择你要生成那个平台或者那种框架上使用的对应文件，如css就是一般浏览器使用的图片和css文件，pixi.js就是专门为pixi.js这个动画制作框架产生对应的图片和json文件其他的可以慢慢研究。然后是名字，再其次是大小限制。
Advanced高级设置栏目里
是为每种类型下设置其名称格式啦，间距啦，缩放比例啦等等设置一般也不会去动的。
之后按apply就设置完毕了。
设置完毕后按save来生成我们想要的文件。
我这里选择了生成css类型。
这里写图片描述
生成的图片就不用看了，来看看生成的css代码。

.img1{top:0px;left:0px;
width:323px;height:300px;background: url("sprites.png") no-repeat -0px -0px;}
.img2{top:0px;left:0px;
width:245px;height:350px;background: url("sprites.png") no-repeat -335px -0px;}
.img3{top:0px;left:0px;
width:318px;height:300px;background: url("sprites.png") no-repeat -0px -312px;}