ImgConvert

GIF 转精灵图工具

将 GIF 动画帧合并为一张透明 PNG,选择排列方式,并调整帧间距和缩放比例。

选择一张不超过 25 MB 的 GIF,选中文件后即开始上传。

0 px
100%

GIF 转精灵图:把动画帧排列成一张 PNG

使用这个在线 GIF 转精灵图工具,将动画的完整帧合并到一张透明 PNG 中。你可以选择网格、横向排列或纵向排列,再调整帧间距和缩放比例。生成的静态图片可导入自己的项目,按格子切分使用。

精灵图通常称为 sprite sheet,也会写成 spritesheet。它把每一帧放在大小一致的单元格里,并保留 GIF 原来的帧顺序。即使动画中存有重复的画面,对应的帧也会一并保留。

如何把 GIF 转成精灵图

1

选择并上传一张 GIF

从设备中选择一张不超过 25 MB 的 GIF。选中文件后会开始上传,上传完成后即可创建精灵图。

2

选择排列方式和帧大小

选择网格、横向排列或纵向排列。网格支持自动排列,也可以指定列数;需要调整尺寸时,拖动帧间距和缩放比例滑块即可。

3

生成、预览并下载 PNG

点击生成精灵图,任务会交给服务器处理。完成后查看图片预览并下载 PNG。也可以调整设置,再次转换已上传的 GIF。

网格、横向排列和纵向排列怎么选

排列方式决定整张图片的形状。可以根据项目的切片方式和纹理尺寸限制,选择合适的布局。

排列方式适用情况需要注意
网格将动画帧分成多行排列。默认自动选择列数;选择指定列数后,可设置 1–240 列。
横向排列全部帧排成一行,也称为 sprite strip。帧数较多时,导出的 PNG 可能很宽。
纵向排列全部帧排成一列。导入项目前,注意检查图片总高度。

网格按从左到右、从上到下的顺序放置帧。三种排列方式都保留原有顺序,改变布局不会删减动画帧。

按项目需要设置列数、帧间距和缩放比例

自动排列或指定列数

自动排列会根据帧数和单帧尺寸选择网格列数。需要固定每行的帧数时,切换到指定列数,再输入所需数值。

例如,8 帧 64 × 64 像素的动画,设置为 3 列、2 像素帧间距和 100% 缩放,会生成一张 196 × 196 像素的 PNG。最后一格为空,保持透明。

帧与帧之间的间距

帧间距可在 0–32 像素之间调整,默认为 0,相邻单元格会直接相接。增大间距后,帧之间会留出透明空隙。

此设置不会在图片四周增加外边距。在其他软件中切片时,请使用相同的间距,避免把相邻帧的一部分切进来。

50%–200% 的帧缩放比例

缩放滑块会同时调整每一帧的宽度和高度,支持 50%–200% 之间的整数百分比。默认的 100% 保留原始单帧尺寸。

缩放使用最近邻插值,保留清晰的像素边缘,不会将边缘平滑模糊。缩小时可能丢失细节,放大也无法恢复源文件中没有的细节。

GIF 转成精灵图后,哪些内容会保留?

GIF 的某些帧可能只存储画面中发生变化的局部区域。本工具会先还原完整画面,再放进大小一致的单元格。原本透明的像素仍然透明,原有的不透明背景也会保留。

每个存储帧都会在结果中出现一次,包括重复帧。导出的图片不包含动画播放或帧时长数据。如需先裁去多余边缘,可以使用 GIF 动画裁剪,再上传裁剪后的动画。

在游戏引擎、编辑器或 CSS 动画中使用精灵图

这个精灵图生成器以一张 GIF 为输入。将下载的 PNG 导入编辑器或游戏引擎后,需要在那里设置单元格尺寸和帧间距,并检查目标环境的纹理大小限制。本工具不导出引擎专用项目或图集配置文件。

CSS 定位用法可参考 MDN 图片精灵指南。如果你需要能在播放器里直接播放的文件,可以使用 GIF 转视频。

GIF 文件和精灵图的尺寸限制

检查项目限制
输入文件一张 GIF,最大 25 MB
来源帧数最多 240 帧
来源帧总像素不超过 6000 万:宽度 × 高度 × 帧数
PNG 边长宽和高分别不超过 8192 像素
PNG 总像素不超过 6000 万:输出宽度 × 输出高度

以上限制需要同时满足。文件体积较小的 GIF,解码后也可能包含大量像素。如果输出超出限制,可以尝试网格布局、调整列数,或降低帧缩放比例。

GIF 转精灵图常见问题

可以,一次处理一张 GIF,无需注册账号。工具不会给 PNG 添加水印;如果原动画里已经有水印,它仍会作为画面的一部分保留。

PNG 是包含各帧的静态图片,不含 GIF 的帧延迟和循环播放设置。将图片切分后,需要在自己的软件中设置动画播放时长和顺序。

可以。原有透明像素、帧间空隙和未使用的单元格都会保持透明。此转换不会移除不透明背景;如果要把动画用在其他底色上,可以先在预览中检查边缘。

网格由大小相同的单元格组成。如果帧数不能刚好填满最后一行,剩余位置会保持透明。这些位置是空白区域,不是需要加入播放的额外帧。

工具保留 GIF 中存储的每一帧,不会自动去重。重复画面可能本来就是源动画的一部分,有内容的格子数量取决于原文件存储的帧数。

本页会把各帧合并为一张 PNG。如果需要带编号的独立图片和 ZIP 压缩包,请使用 GIF 拆帧下载,方便逐帧单独编辑。

可以。按每帧的宽高和间距切分 PNG,再在引擎或 CSS 代码中设置播放方式。下载结果只有 PNG,请根据所用引擎或代码的要求配置导入参数。

GIF 和 PNG 的编码方式不同,精灵图还会把所有完整帧放在同一画布上。透明间距和空白格也会增加图片尺寸。降低缩放比例可以缩小尺寸,但不保证文件体积一定更小。

开始把 GIF 转成精灵图

选择一张 GIF,排列完整动画帧,下载供项目使用的透明 PNG。