UD5工具箱
多种图片格式上传支持
工具支持PNG、JPEG、WebP、SVG和GIF五种常见图片格式的上传和处理。PNG格式是网页图标最常用的格式，支持透明背景和无损压缩，适合需要在不同背景上显示的图标。JPEG格式适用于不需要透明背景的彩色图片，通过有损压缩可以获得更小的文件体积。WebP格式是Google推出的新一代图片格式，在同等视觉质量下比PNG和JPEG更小，适合追求极致加载性能的项目。SVG格式是矢量图形格式，可以无损缩放到任意尺寸，适合简单的线条和几何图形图标。GIF格式支持动画和透明，适合简单的动画图标。工具会自动处理不同格式的图片，统一转换为选定的输出格式。
水平垂直网格三种排列方向
水平排列模式将所有图片从左到右依次排列在同一水平行中。这种排列方式生成的精灵图宽度较大但高度较小，适合需要水平方向滚动的页面或宽度不受限制的场景。垂直排列模式将所有图片从上到下依次排列在同一垂直列中。这种排列方式生成的精灵图高度较大但宽度较小，适合需要垂直方向滚动的页面或高度不受限制的场景。网格排列模式将图片按照指定的列数排列成行列网格。这种排列方式在宽度和高度之间取得平衡，是最常用和推荐的排列方式。用户可以根据图片数量、尺寸和页面布局需求选择最合适的排列方向。
每行列数灵活设置
在网格排列模式下，用户可以设置每行显示的图片数量，可选范围为2到12列。列数的设置直接影响生成精灵图的宽高比例和整体布局。设置较少的列数（如2到4列）会使精灵图变得更窄更高，每行只有少数图片并排显示。设置较多的列数（如8到12列）会使精灵图变得更宽更矮，每行包含更多图片。选择列数时需要考虑图片的数量和尺寸：如果图片数量较多且尺寸较小，可以选择较多的列数以减少精灵图的总高度；如果图片尺寸较大，可以选择较少的列数以避免精灵图过宽。一般建议列数设置为图片总数的平方根附近，可以获得接近正方形的精灵图。
间距设置防止像素干扰
间距设置允许用户在相邻图片之间添加0到50像素的间距。间距的主要作用是防止不同图片的像素在浏览器渲染时相互干扰。在没有间距的情况下，如果两张相邻图片的边缘像素使用了抗锯齿处理（如半透明的边缘过渡色），浏览器在使用background-position定位时可能会出现像素渗透现象，导致一张图片的边缘颜色出现在另一张图片的显示区域中。通过添加适当的间距（通常1到2像素即可），可以有效避免这个问题。间距还会增加精灵图的总体积，因此建议在保证显示效果的前提下使用尽可能小的间距值。
缩放比例25%到200%调整
缩放功能允许用户在25%到200%之间调整每张原始图片在精灵图中的显示大小。当设置缩放比例为100%时，图片保持原始尺寸不变。当设置小于100%时，图片会按比例缩小，减小精灵图的总体积但可能损失细节。当设置大于100%时，图片会按比例放大，增加显示尺寸但可能引入模糊。缩放功能对于统一不同尺寸的原始图片特别有用，可以将不同大小的图片缩放到统一的比例后合并到精灵图中。缩放后图片的实际像素尺寸会按比例变化，生成的CSS代码中也会相应调整background-size和background-position属性。
自定义类名前缀
类名前缀设置允许用户自定义生成的CSS类名的前缀部分。默认情况下，工具会使用图片文件名（去除扩展名）作为类名。通过设置自定义前缀，可以在类名前面添加指定的字符串。例如，设置前缀为sprite-icon-，则图片home.png生成的类名会变为sprite-icon-home。自定义前缀在以下场景中特别有用：避免与项目中已有的CSS类名发生冲突；配合CSS命名规范（如BEM方法论）使用；在多个项目中使用不同前缀区分不同来源的精灵图。前缀设置为空时等同于不添加前缀。
三种输出格式选择
输出格式支持PNG、JPEG和WebP三种格式。PNG格式是最通用的选择，支持完整的Alpha通道透明（256级透明度），采用无损压缩，适合需要透明背景的图标和对图片质量要求较高的场景。JPEG格式采用有损压缩，在同等视觉质量下文件体积通常比PNG小30%到50%，但不支持透明背景，适合不需要透明效果的彩色图片。WebP格式是Google推出的新一代图片格式，在同等视觉质量下文件体积比PNG小约25%，比JPEG小约10%，同时支持透明和动画。WebP格式的浏览器兼容性已非常良好，在所有主流浏览器中都得到支持，是追求极致加载性能的首选格式。
网格线显示与可视化调试
网格线显示功能可以在精灵图预览中叠加显示彩色的网格辅助线，每张图片的边界用不同颜色的线条标识。网格线帮助用户直观地查看每张图片在精灵图中的精确位置、大小和间距。通过网格线可以快速发现以下问题：图片排列不整齐（某些图片偏上或偏下）、间距设置不当（某些图片之间的间距过大或过小）、图片裁切（某些图片的边缘被截断）。网格线仅用于预览调试，不会被包含在最终下载的精灵图图片中。用户可以通过开关按钮随时切换网格线的显示和隐藏状态。
一键复制CSS与下载精灵图
工具提供一键复制CSS代码和一键下载精灵图图片的便捷功能。复制CSS代码会将生成的完整CSS样式代码复制到系统剪贴板中，用户可以直接粘贴到项目的CSS文件中使用。下载精灵图会将合并后的图片保存为选定格式的文件，文件名默认为sprite.png（或对应的格式后缀）。生成的CSS代码包含了精灵图的容器样式和每张图片的独立类名，使用方法是将精灵图图片放置在项目中正确的位置，然后在HTML中为需要显示图标的元素添加对应的类名。整个流程简单高效，无需任何额外的配置或工具。