CSS雪碧图在线合成工具

批量上传图标素材,一键合并雪碧图片,自动生成CSS背景定位代码,优化前端网页图片请求

📤 上传图片素材
📁
点击区域选择图片,或者直接拖拽图片到此处
支持PNG、JPG、WebP,支持多选批量上传
⚙️ 合成参数设置

📄 生成结果

📖 工具使用说明

CSS雪碧图合成工具用于把零散小图标合并成一张大图,借助CSS background-position定位展示图标,能够有效减少前端页面HTTP请求数量,优化网页加载速度,是网站前端性能优化常用方案。

使用步骤:批量上传图标图片 → 选择排布方式、设置图片间隙 → 点击生成雪碧图 → 预览图片,下载合成图片并复制自动生成的CSS样式代码,直接粘贴到项目内使用。

适用场景:网站导航图标、按钮小图标、状态标识、移动端网页图标集合,支持自定义类名前缀,方便在多个项目内复用雪碧图样式。