Skip to main content

图片精灵表 将多张图片合并成一个单独的精灵表,支持配置列数和间距。

图片精灵表 illustration
🖼️

图片精灵表

将多张图片合并成一个单独的精灵表,支持配置列数和间距。

1

上传图片

拖放或选择多张图片(图标、边框)用于精灵表。

2

配置布局

设置列数和精灵之间的填充距离。

3

生成并下载

生成精灵表图片并复制CSS坐标。

Loading tool...

What Is 图片精灵表?

一个将多个图像合成为单个网格排列的复合图像的精灵表生成器,附带每个精灵的CSS背景位置坐标。对于Web性能优化、游戏精灵动画和图标集来说是必不可少的。上传您的单独图像,设置列数和填充,然后工具将同时生成复合PNG和CSS代码片段。

Why Use 图片精灵表?

  • 生成精灵表图片 + CSS 坐标
  • 可配置列数和填充距离
  • 减少HTTP请求以提高网页性能
  • 非常适合图标集和游戏精灵

Common Use Cases

网页性能

将图标组合成单个精灵表以减少HTTP请求。

游戏开发

从单个帧图片创建动画精灵表。

图标集

将多个图标打包成单个高效的精灵图片。

CSS 精灵

生成优化的精灵表并附带可用的CSS代码。

Technical Guide

图像被加载并以可配置的列形式排列在网格中。行数计算为ceil(imageCount/columns)。画布尺寸根据每列最大宽度和总行高加上填充计算得出。每个图像都绘制在其计算出的网格位置。CSS坐标作为每个精灵的负背景位置值生成。

Tips & Best Practices

  • 1
    使用一致的图片大小以保持干净的网格
  • 2
    将填充距离保持在1-2px以最小化浪费空间
  • 3
    为文件命名描述性名称以获得更好的CSS类名
  • 4
    对于游戏引擎兼容性,请使用2的幂

Related Tools

Frequently Asked Questions

Q 什么图片大小最合适?
一致的大小会产生最干净的精灵,但也支持混合大小。
Q 是否生成CSS?
是 - 包含background-position值的完整CSS代码,用于每个精灵。
Q 我可以合并多少张图片?
任何数量的图片都可以合并成单个精灵表。
Q 关于视网膜显示屏怎么办?
使用2x分辨率图片,并将CSS背景大小减半以支持视网膜显示。
Q 我可以用它来创建游戏精灵吗?
绝对可以 - 按序排列动画帧以创建游戏精灵表。

About This Tool

图片精灵表 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.