雪碧图生成器
生成设置
已添加图片
0 张功能亮点
多图合并
支持 PNG / JPG / GIF / WebP / SVG 多种格式，一次上传多张图片自动合并为单张雪碧图。
多种布局模式
支持网格等距对齐、紧凑装箱、横向一行、纵向一列四种排列方式，灵活适配不同场景。
CSS 代码自动生成
自动为每张图片生成带 background-position 坐标的 CSS 类名，并附带 HTML 示例代码，开箱即用。
纯前端本地处理
所有图片在浏览器本地完成合并和坐标计算，不上传任何服务器，保护图片隐私安全。
实时预览
生成后立即预览雪碧图效果，查看每张图片的排列位置和整体尺寸，所见即所得。
使用步骤
- 点击上传区域或拖拽图片到虚线框内，一次可选择多张图片。
- 在左侧面板选择排列方式（网格 / 紧凑 / 横向 / 纵向）并设置间距等参数。
- 配置 CSS 类名前缀和图片文件名，点击生成雪碧图。
- 预览雪碧图效果，复制或下载生成的 CSS / HTML 代码，下载 PNG 图片文件。
关于 雪碧图生成器
CSS Sprite（雪碧图/精灵图）是前端性能优化的经典手段：将多个小图标（导航图标、按钮图标、装饰图）合并到一张大图中，然后通过 CSS background-position 定位显示对应图标。这样做的好处是：原本需要 20 个 HTTP 请求分别加载 20 个小图标，现在只需要 1 个请求加载 1 张图——显著减少页面加载时间。本工具支持上传多张图片自动合并为一张雪碧图，并提供每个图标的 background-position CSS 坐标代码。所有处理在浏览器本地完成。适合前端开发在优化网站图标系统、减少页面首屏加载时间时使用。
常见问题
- 雪碧图现在还值得用吗？
在 HTTP/2 和 HTTP/3 时代，雪碧图的性能优势不如 HTTP/1.1 时代明显——因为 HTTP/2 支持多路复用，可以同时加载多个小文件而不需要每个文件单独建立连接。但雪碧图仍有价值：① 对于非常小的图标（< 1KB），单独文件请求的开销占比高，合并仍有收益；② 减少 DNS 查询和 TLS 握手（虽然缓存可缓解）；③ 某些 CDN 按请求数计费，合并可省钱。现代替代方案：SVG Sprite（将多个 SVG 内联在 HTML 中通过
<use>引用）或 HTTP/2 Server Push。- 紧凑装箱和网格布局有什么区别？
网格布局按固定列数排列图片，所有单元格按最大图片尺寸对齐，适合需要统一对齐的场景。紧凑装箱使用贪心算法（Growing Bin Packing）将不同尺寸的图片紧密排列，最大化空间利用率，生成的雪碧图更小，适合图片尺寸差异较大的情况。