雪碧图生成 — 合并小图自动出 CSS 坐标
在线把多张小图标合并成一张 sprite.png,自动生成每张图的 background-position CSS:紧凑 / 竖排 / 横排三种排列、间距可调,CSS 一键复制或与 PNG 打包 ZIP。浏览器本地合并、图片不上传。支持电脑、平板、手机浏览器。
雪碧图(CSS Sprite)是把多张小图标合并成一张大图,再用 background-position 定位显示其中一块——把 N 个图片请求合成 1 个,老站与邮件模板里仍常用。本工具批量上传图标后本地合并:紧凑模式按 shelf 装箱省空间,竖排 / 横排适合规则图标条;类名取自文件名(.sprite-xxx),宽高与坐标自动写好,复制即用。需要注意:现代前端更推荐 SVG 图标或 icon font(HTTP/2 下多请求代价也已很小),新项目请先考虑 SVG,本工具主要服务维护老项目与特殊场景。全程浏览器本地处理,图片不上传。
什么时候需要
维护老项目
既有雪碧图体系的老站补图标、重新合图。
邮件模板 / 受限环境
不支持 SVG 或外部字体的环境,雪碧图仍是稳妥选择。
游戏 / Canvas 素材
把素材合成一张图集,减少加载与切换开销。
雪碧图的取舍
- N 个请求合成 1 个,老环境提速明显
- 自动生成类名 + 宽高 + 坐标,复制即用
- 间距可调,防止相邻图标渲染串边
- 改一张图就要重新合图、坐标全变,维护成本高
- 现代项目优先考虑 SVG 图标 / icon font,HTTP/2 已大幅摊薄多请求代价
- 合并输出为 PNG;高倍屏需按 2x 素材自行在 CSS 里配 background-size
雪碧图常见问题
把 sprite.png 放进项目,引入生成的 CSS(注意 background-image 的 url 路径按你的目录调整),HTML 里给元素加对应类名(如 <span class="sprite-home"></span>)即可显示对应图标。
浏览器缩放或高倍屏下,background-position 取样可能溢出到相邻图标(串边)。默认 2px 间距即可避免;如果图标会被缩放展示,建议加大间距。
支持的做法是:上传 2x 尺寸的素材合图,然后在 CSS 里给容器写一半的宽高并加 background-size(合图宽的一半)。本工具输出的坐标是物理像素,按比例除以 2 即可。
新项目一般不必:SVG 图标更清晰、可变色、维护简单,HTTP/2 也让多请求代价大减。老项目维护、邮件模板、部分游戏 / Canvas 场景仍然实用——按需选择。