雪碧图生成

点击上传图片

支持格式：PNG, JPG, WebP

050

上传图片以预览精灵图

在线合并多张小图标生成 CSS 雪碧图，浏览器本地处理零上传，支持横向、纵向、网格三种布局自动输出 background-position 定位代码。

相关推荐

ICO 图标生成

图片压缩

图片格式转换

图片尺寸调整

图片裁剪

图片旋转翻转

什么是雪碧图（CSS Sprite）？

雪碧图（CSS Sprite）是把多个小图合并为一张大图，然后用 background-position 定位显示单个图标的技术。「Sprite」这个词来源于早期游戏机，把多个动画帧合并到一张大图里反复切换显示。Web 前端借用了这个概念，把页面里大量小图标合并成一张图加载。

**为什么需要雪碧图？** HTTP 1.1 时代每个图片文件都会产生一次 HTTP 请求，含 TCP 握手、TLS 握手、请求头开销。100 个图标 = 100 次请求。雪碧图把所有图标放在 1 张图里，1 次请求完成所有图标加载，显著加快首屏渲染。HTTP/2 多路复用虽然降低了这部分优势，但雪碧图对 CDN 缓存、gzip 压缩、HTTP/1.1 兼容仍有价值。

**基本原理：** 假设雪碧图 200×60 包含 3 个 60×60 图标横向排列。在 CSS 中给一个 60×60 元素设置 `background: url(sprite.png); background-position: 0 0;` 显示第一个；改为 -60px 0 显示第二个；改为 -120px 0 显示第三个。本工具会自动输出这些坐标值。

**现代替代方案：** SVG + use/symbol（推荐，矢量、可变色、可动画）、Icon Font（兼容性好、跨平台）、HTTP/2 Server Push、Web 字体图标等。每种方案有不同适用场景，建议根据项目实际情况选择。

适用场景

  • 网页项目中有大量小图标需要合并成雪碧图减少 HTTP 请求、提升首屏加载速度
  • 前端开发时需要统一管理项目图标资源，自动生成 CSS 背景定位代码
  • 图标资源准备就绪后批量生成雪碧图 + CSS 代码，直接交付给团队使用
  • 合并后大图搭配 [图片压缩工具](/image/compress/) 进一步减小总体积，优化 LCP 性能指标
  • App / Electron / 桌面应用内嵌静态图标资源打包合并为单张图
  • 邮件 HTML 模板或静态博客需要多张图标但又受邮件客户端兼容性限制
  • 设计师交付图标资源时提供雪碧图形式方便前端工程师快速集成
  • 为 Retina 屏专门输出 2x 分辨率雪碧图，通过 background-size 适配 1x 与 2x 屏幕

使用方法

  1. 点击上传区域或拖拽多张图片到上传区（支持 JPG / PNG / WebP / GIF 等格式）
  2. 在左侧图片列表中通过拖拽手柄或上下按钮调整图标顺序
  3. 在左侧布局区域选择「横向」「纵向」或「网格」三种排列方式之一
  4. 通过间距滑块调整图标之间的像素间距（建议 1-5px）
  5. 右侧实时预览雪碧图效果，确认后点击「下载」保存 PNG 图片，并「复制」CSS 代码到项目

功能特点

  • 多图一键合并：上传多张小图标或图片，自动合并为单张雪碧图
  • 三种布局方式：横向、纵向、网格布局自由切换，适配不同使用场景
  • 间距可调：0-50px 像素间距滑块，灵活控制图标间留白
  • 拖拽排序：列表中拖动图标可调整合并顺序，CSS 坐标自动同步更新
  • 移动端排序：支持上下按钮调整顺序，移动端浏览器也能方便操作
  • CSS 自动生成：自动输出每张子图的 background-position、宽高等完整定位代码
  • 实时预览：图片或参数变化时立即重生成雪碧图，所见即所得
  • 一键复制 CSS：内置复制按钮，一键复制完整样式表代码到剪贴板
  • 一键下载 PNG：合并后大图直接保存到本地，文件名固定为 sprite.png
  • 本地浏览器处理：Canvas API 本地合并，图片不上传服务器保护隐私
  • 多格式输入：支持 JPG、PNG、WebP、GIF 等主流图片格式上传
  • 透明背景保留：输出 PNG 保留原图标透明通道，适合图标合成

最佳实践

Retina 屏 2x 适配：用 2x 源文件生成雪碧图

如果目标用户使用 Retina 屏（Mac、iPhone、HiDPI Windows），建议上传 2x 分辨率源文件（如 32×32 图标）生成雪碧图，然后在 CSS 中用 background-size: 32px auto 缩放回 16×16 显示。这样 1x 屏不会模糊，2x 屏同样清晰。一次生成适配所有设备。

HTTP/2 项目下雪碧图仍有价值

HTTP/2 多路复用降低了请求数瓶颈，但雪碧图依然在 CDN 缓存复用、gzip/Brotli 高压缩率、内网代理穿透、HTTP/1.1 兼容回退这四个场景下有显著优势。企业内网、政府/银行系统、邮件 HTML 模板仍然以 HTTP/1.1 为主，雪碧图不可替代。

PNG-8 vs PNG-24 选择：图标用 PNG-8，渐变图用 PNG-24

雪碧图输出固定为 PNG，但生成前请用合适位深的源文件：纯色/单色图标用 PNG-8（无损透明，体积比 PNG-24 小 60-80%）；含渐变、阴影、高光用 PNG-24。本工具不限制源格式，建议提前用 PNG 压缩工具优化后再合并。

CDN 缓存策略：文件名加 hash 永久缓存

合并后 sprite.png 不要固定文件名，建议用内容 hash 重命名（如 sprite.a3f2b1.png）实现永久缓存（Cache-Control: max-age=31536000）。这样浏览器只下载一次，后续访问走本地缓存，比 HTTP/2 节省更多流量。本工具下载文件名固定为 sprite.png，可下载后重命名。

gzip / Brotli 压缩让雪碧图更省流量

合并后大图的像素值连续性强，gzip/Brotli 压缩率远高于散落小图。Nginx + gzip 1 级即可让雪碧图再减小 60-80%，Brotli 可达 85%+。HTTP 头开启 Content-Encoding 后，1MB 雪碧图实际传输可能仅 200-300KB，是雪碧图最被低估的隐藏优势。

CSS Modules / Vue scoped 适配：用 :global() 包裹

如果项目使用 CSS Modules 或 Vue scoped CSS，工具输出的 .icon-home、.sprite 类名会被局部哈希化失效。建议在 .module.css 中用 :global(.sprite) { ... } 包裹公共类，再在 scoped 块外引入。或不使用 CSS Modules，仅靠 BEM 命名空间管理。

与 Icon Font 混合使用：核心图标用 Font，复杂图标用雪碧图

实践中最稳的方案是混合：UI 通用小图标（设置、关闭、搜索、用户）用 Icon Font（变色、矢量、跨平台）；复杂彩色图标（产品 logo、运营 banner 图标）用雪碧图。两种方案优势互补，避免任一方案全量使用带来的维护成本。

工程化项目用 spritesmith 自动化，本工具做原型

长期维护项目建议用 spritesmith（Webpack）或 gulp.spritesmith 把雪碧图生成接入构建流程：源代码改图标后自动重跑、输出 hash 文件名、自动生成 SCSS/LESS 变量。本工具定位是零依赖快速原型和小项目交付，CI/CD 流水线场景用构建插件更合适。

Modern 项目可从雪碧图迁移到 SVG symbol

如果项目支持现代浏览器（Chrome / Safari / Firefox / Edge 全量、IE 11+），建议从雪碧图迁移到 SVG symbol：单文件管理所有图标、CSS 控制颜色和动画、无 background-position 坐标维护成本。本工具输出的雪碧图是一次性资产，可作为迁移前的过渡方案。

常见问题

什么是雪碧图？为什么要把多张图合并成一张？

雪碧图（CSS Sprite）是把多张小图合并为一张大图，再用 background-position 定位显示单个图标的技术。合并后只需 1 次 HTTP 请求就能加载所有图标，相比逐个加载数十张小图能显著减少请求数、加快首屏渲染，是前端性能优化的经典手段。

怎么在线把多张图标合并成雪碧图？

上传多张图片后工具会自动按所选布局合并，并实时预览。同时在右侧自动输出每张子图对应的 CSS 背景定位代码（background-position）和宽高值，复制到样式表即可使用。生成的雪碧图为 PNG 格式，可一键下载。

生成的 CSS 代码怎么用？

把下载的 sprite.png 放到项目目录（如 /img/sprite.png），把工具输出的 CSS 粘贴到样式表。然后给需要显示图标的元素加 .sprite 类和对应的 .icon-xxx 类即可显示对应图标。例如：<i class="sprite icon-home"></i>。class 名由工具根据原始文件名自动生成。

支持哪几种排列方式？

支持三种：横向排列（图标按行从左到右并排）、纵向排列（图标按列从上到下堆叠）、网格排列（按图标数量自动均分为方阵，列数取平方根向上取整）。可以用左侧面板切换模式预览效果。

能调整图标之间的间距吗？

可以。左侧有像素间距滑块，范围 0-50px，建议 1-5px。合理间距能避免 CSS 定位时边缘像素干扰，但不会影响最终使用——间距是雪碧图内部的边距，CSS 调用时只使用 background-position 精确坐标。

能改变图标的排列顺序吗？

可以。左侧图片列表中每张图都支持拖拽排序（用左侧的拖拽手柄），也支持移动端上下按钮调整顺序。调整后雪碧图会按新顺序重新生成，CSS 坐标也会同步更新。

支持哪些图片格式？

支持 JPG、PNG、WebP、GIF 等所有常见图片格式输入。输出统一为 PNG 格式（保留透明背景）。建议图标使用 PNG 输入，PNG 透明通道在合并后的雪碧图中能正常保留。

现代项目还需要雪碧图吗？

HTTP/2 普及后，多路复用降低了一部分雪碧图优势，但雪碧图对 CDN 缓存、gzip 压缩、首屏关键图标加载仍有价值。如果图标数量不多（< 10 个）或需要变色、动画，建议改用 SVG symbol 或 Icon Font；如果是大量静态 PNG 图标，雪碧图仍然是稳定可靠的方案。

Retina 屏下雪碧图会变模糊吗？怎么适配？

会模糊。Retina 屏（Mac、iPhone、HiDPI Windows）物理像素是 CSS 像素的 2 倍或 3 倍，普通 1x 雪碧图会被拉伸到 2x 像素显示导致边缘模糊。解决方案是上传 2x 分辨率源文件（32×32 替代 16×16）生成雪碧图，CSS 中用 background-size: 32px auto 缩放回 16×16 即可。

图标合并会损失画质吗？

不会损失画质。合并过程只是把多张图按位置排列到一张大画布上，不进行任何重采样、压缩或颜色调整。输出 PNG 保持原图质量。如果需要进一步减小合并后文件体积，可以下载后用 [图片压缩工具](/image/compress/) 进一步处理。

雪碧图图片会传到服务器吗？安全吗？

不会。所有图片合并都在你的本地浏览器内通过 Canvas API 完成，文件不会上传到任何服务器，处理完即焚。即使是含敏感信息的内部图标、未公开的 Logo 设计稿也能安心处理。

生成的雪碧图怎么下载？

上传图片后工具自动生成预览。点击左侧「下载」按钮即可保存为 sprite.png 到本地。如果有 CSS 代码需求，工具会自动输出完整 CSS，点「复制」按钮即可复制到剪贴板。

class 名能不能自定义？

当前版本 class 名由工具根据原始文件名自动生成，固定使用 .icon- 前缀。例如上传 home.png 会生成 .icon-home。规范命名（用英文、数字、连字符）的文件能得到更清晰的 CSS 类名。

雪碧图、Icon Font、SVG Symbol 该选哪个？

看场景：大量静态 PNG 图标、需要兼容 IE 低版本 → 雪碧图；UI 通用小图标、需要变色、跨平台 → Icon Font；现代项目、需要变色和动画、希望单文件管理 → SVG Symbol 是首选。实践中常混合使用：核心 UI 图标用 Icon Font，复杂彩色图标用雪碧图。

雪碧图合并后大图能不能用 [图片压缩工具](/image/compress/) 进一步减小体积？

可以。本工具固定输出 PNG 无损格式，体积可能较大。建议流程：本工具生成雪碧图 → 用 [图片压缩工具](/image/compress/) 减小 PNG 体积或转 JPG（如果不需要透明）→ 用 [图片转换工具](/image/convert/) 按需转 WebP。组合使用能最大化加载性能。

术语表

雪碧图（CSS Sprite）
把多张小图合并为一张大图，再用 background-position 定位显示单个图标的技术。Web 前端经典性能优化手段。
background-position
CSS 属性，指定背景图显示的起始坐标。雪碧图通过负值让背景图向左 / 上滚动到目标图标位置。例如：background-position: -60px 0 表示显示 60px 偏移处的图标。
background-size
CSS 属性，指定背景图显示尺寸。Retina 屏适配关键：上传 2x 源文件生成雪碧图后，CSS 中用 background-size: 32px auto 缩放回 1x 尺寸，1x 和 2x 屏都能清晰显示。
网格布局（Grid Layout）
本工具的网格模式按图标数量自动计算列数（取平方根向上取整），按行优先排列成方阵。例如 9 个图标会排成 3×3 网格。
图标间距（Padding）
雪碧图中每张子图之间的像素留白。建议 1-5px，能避免 CSS 定位时边缘像素干扰，但不影响最终使用——CSS 调用时只用精确坐标值。
PNG 透明通道
PNG 格式支持 Alpha 通道，图标背景可设置为透明。雪碧图输出保留 PNG 格式，透明图标合并后仍能正常显示。
HTTP/2 多路复用
HTTP/2 协议支持在单个连接上并行处理多个请求，降低了一部分雪碧图优势。但 HTTP/2 在 CDN 配置、旧浏览器兼容、gzip 压缩上仍不如合并后的大图。
SVG Symbol
SVG 的 <symbol> 元素 + <use> 引用机制，把所有图标合并到一个 SVG 文件，CSS 控制 fill / stroke / 动画。雪碧图在现代项目的首选替代方案。
DPR（设备像素比）
Device Pixel Ratio，物理像素与 CSS 像素的比值。Retina 屏 DPR=2，CSS 16×16 图标实际需要 32×32 物理像素。雪碧图适配 Retina 屏的核心参数。

雪碧图三种布局模式对比

布局模式排列规则典型用途
横向排列图标按行从左到右并排导航栏、Tab 按钮、水平工具条
纵向排列图标按列从上到下堆叠垂直菜单、列表项前缀、上下结构
网格排列按数量自动均分成方阵通用场景、未知数量图标的最佳起点

雪碧图间距 Padding 推荐值

间距像素适用场景使用建议
0px图标边缘干净、已自带透明 padding极限紧凑，但边缘像素可能互相干扰
1-2px高质量图标，边缘留极少安全区推荐值，平衡紧凑与稳定
3-5px普通图标、含阴影/描边安全距离，主流推荐
6-10px图标尺寸差异大、含描边避免大图标遮盖小图标
10-50px调试期、人眼可见分组仅用于开发预览，生产环境不推荐

Retina 屏 2x 雪碧图适配参数对照

屏幕 DPRCSS 尺寸源文件尺寸background-size
1x16×1616×16auto
2x16×1632×3232px auto
3x16×1648×4848px auto
2x24×2448×4848px auto

Authoritative References