批量CSS雪碧图生成器
将多个图标或图像合并为单个文件，以减少HTTP请求并提升网站速度。自动生成完美的CSS代码。
将图标拖放到此处以生成精灵
支持PNG、JPG、WebP、AVIF格式。将多张图像合并为单个CSS精灵图。
通过示例尝试
已加载的画廊
Sprite Studio
精灵图预览
独立图标
| 图标 | 类名 | 位置 | 尺寸 | 操作 |
|---|
精灵图选项
批量应用
变更时自动重新生成
专业CSS精灵图生成
通过将多个小图像合并为精灵图来优化网络资源。降低延迟、节省带宽、简化CSS工作流程。
提升网站速度
减少HTTP请求可加快页面加载速度。将50个图标合并为1个雪碧图，可消除49次服务器往返请求。
自动生成CSS
无需手动计算像素。我们的工具会自动计算图标集中每个图标的背景位置和尺寸。
智能布局
选择垂直、水平或优化网格布局。调整内边距防止图标缩放时产生"渗色"现象。
如何创建CSS精灵图
上传您的图标
拖放所有需要合并的小图像或图标。支持PNG、JPG、WebP和AVIF格式。
配置精灵设置
选择布局样式，调整内边距，并设置CSS类前缀。预览将即时更新。
导出精灵与CSS
下载最终精灵图及对应CSS代码的ZIP文件，可直接复制粘贴到项目中。
常见问题
为什么我应该使用CSS精灵图？
CSS雪碧图是经典的性能优化技术。它能减少HTTP请求数量，对于网速较慢或包含大量小型资源（如图标或UI元素）的网站尤为有益。
我应该选择哪种布局？
纵向与横向布局最便于调试，网格布局则能最大化压缩图像面积与文件体积。
高DPI（视网膜）屏幕如何处理？
您可以生成双倍尺寸图标的精灵图，并在CSS中使用"background-size"属性进行缩放，从而在高DPI显示屏上实现清晰渲染。