雪碧图打包
Sprite Sheet Packer
把多张图片拼进一张图集，同时输出对应的 CSS 或 JSON 坐标表。
一张图集，加上让它可用的坐标——因为没有帧映射表的雪碧图只是一张画着几个图标的图片。打包器报告它的占用率，那个数字告诉你这张图集到底值不值得做。
把要打包的图标放到这里
一张图集，外加让它真正能用起来的帧映射表。
怎么用
拖入图标
文件名成为精灵名，也就成为 CSS 类名或 JSON 键。
留至少两个像素的间隙
这防止图集缩放绘制或双线性过滤时相邻精灵渗进来——图标边上那条谁都解释不了的线。
选映射表格式
CSS 是唯一不需要 JavaScript 的。JSON 遵循 TexturePacker 的 hash 形状，常见的游戏引擎已经能解析。
素材是 @2x 的就设像素比
它把映射表里的每个数字都除一遍，让 CSS 描述的是 CSS 像素而不是设备像素。
常见问题
占用率数字是什么意思？
图集里有多少是精灵而不是空白。低于一半左右，打包正在和形状差异很大的精灵较劲，你在下载大量透明区域；拆成两张通常更好。
HTTP/2 之下还该用雪碧图吗？
网页上通常不该——当年让图集合理的请求开销大部分已经没了，SVG sprite 或单独的文件更好维护。canvas 或 WebGL 游戏里它仍然是正确答案，因为绑定一次纹理胜过五十次。
为什么图集不是 2 的幂？
因为那会浪费空间，而当前大多数 GPU 不需要。要做 mipmap 或者面向老的纹理路径就打开这个选项，接受浪费的面积。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
CSS 美化与压缩
CSS Beautifier & Minifier
格式化或压缩 CSS，不重排任何声明，原本的记号序列一个不动。
图片尺寸调整
Image Resizer
按像素、百分比或最长边缩放，可锁定宽高比并批量套用预设。
PNG 压缩
PNG Compressor
量化调色板并重写 deflate 数据流，在不改变尺寸的前提下减小 PNG 体积。
图片抠图去背景
Background Remover
在 OKLab 色彩空间中抠掉纯色或均匀背景，输出透明 PNG，并可用画笔修补边缘。
EXIF 信息清除
EXIF Remover
删掉照片里的相机、GPS 和编辑记录等元数据，像素本身分毫不动。
Favicon 网站图标生成
Favicon Generator
一次生成整套图标——ICO、各尺寸 PNG、苹果触摸图标、web manifest——外加可直接粘贴的 HTML。