雪碧图工具 - 图片工具 · 萤炬工具箱

雪碧图工具双向处理：把多张小图标合成一张雪碧图并生成对应的 CSS 定位代码，或者反过来把现成雪碧图按行列拆回单张图片打包下载。合图能把几十次图标请求压成一次，是传统前端的经典优化手段；拆图则常用于从别人的站点素材里取出单个图标。支持多图合成雪碧图并生成 CSS，也支持按行列拆分雪碧图。拆分按行列均分，要求原图标等间…

雪碧图工具双向处理：把多张小图标合成一张雪碧图并生成对应的 CSS 定位代码，或者反过来把现成雪碧图按行列拆回单张图片打包下载。合图能把几十次图标请求压成一次，是传统前端的经典优化手段；拆图则常用于从别人的站点素材里取出单个图标。

使用步骤

1. 选择模式：多图合成雪碧图，或拆分现有雪碧图。
2. 合成时上传多张小图，工具排布并生成 CSS。
3. 拆分时上传雪碧图并填写行列数。
4. 下载雪碧图与 CSS，或下载拆分结果的 ZIP。

功能与限制

• 支持多图合成雪碧图并生成 CSS，也支持按行列拆分雪碧图。
• 拆分按行列均分，要求原图标等间距均匀排列。
• 本地处理，图片不上传。

常见问题

现在还需要雪碧图吗？

HTTP/2 多路复用后合并请求的收益大幅下降，新项目一般用 SVG 图标或字体图标。但维护老项目、需要兼容旧环境、或图标要在 CSS 里当背景图用时，雪碧图仍然实用。

生成的 CSS 怎么用？

每个图标对应一条 background-position 规则。给元素设好宽高和这张雪碧图作为 background-image，再套上对应的 position class 即可显示该图标。

拆分时行列数填错会怎样？

切出来的每张图会错位、包含相邻图标的边角。雪碧图里的图标若不是等间距均匀排列，按行列均分就切不准，这种情况得手动裁。

合成时图标尺寸不一致行吗？

可以合成，工具会按各图实际尺寸排布并生成对应坐标。但尺寸统一的图标排布更紧凑、CSS 也更规整，建议先统一尺寸再合。