Question

有没有什么好工具可以制作css sprites？

理想我想给它一个图像目录和一个现有的.css文件引用那些图像并让它创建一个用所有小图像优化的大图像并更改我的.css文件来引用那些图像。

至少我希望它能够获取一个图像目录并生成一个大的精灵和.css，并将每个精灵用作背景。

有没有好的photoshop插件或完全成熟的应用程序才能做到这一点？

Answer 1

Instant Sprite是我正在研究的浏览器内的CSS精灵生成器。它真的很快，但没有其他一些功能那么多。它目前仅适用于Firefox或Chrome，因为它使用JavaScript FileReader和HTML Canvas在Web浏览器中生成精灵而无需上传。

Answer 2

这将为您完成90％的工作：http://spritegen.website-performance.org/。您仍然需要自己编辑规则，但该工具将为您提供新CSS文件所需的代码片段。

Answer 3

Steve Souders现在有Sprite Me。试试吧，看起来效果很好。

这是链接http://spriteme.org/，这是宣布它的博客文章。

http://www.stevesouders.com/blog/2009/09/14/spriteme/

Answer 4

这看起来很有希望：

http://csssprites.org/

我还发现this article有一些有用的信息，甚至还有一些值得阅读的读者评论。

显然谷歌网络工具包也有一些东西 - 所以如果你使用它，可能值得一试。

Answer 5

试试这个：

http://spritepad.wearekiss.com/

Answer 6

ZeroSprites是一个CSS sprites生成器，旨在使用VLSI平面布局算法进行面积最小化。

Answer 7

found this one pretty fast 500K上传限制可能会很痛苦。源代码可用here

Answer 8

只需使用http://sprites.scherpontwikkeling.nl/它也可以从网站URL生成精灵......你可以在开发网站后整合你的精灵。这很容易使用;）

Answer 9

尚不清楚它是否会进入核心ASP.NET框架，但这里是csssprites的Microsoft codeplex项目：

http://aspnet.codeplex.com/releases/view/50869

如果您喜欢它 - 使用它 - 或者就像想法那样添加注释。我认为这在ASP.NET框架中是一件好事。没有亲自使用它（我必须自己发明轮子），但它得到了很好的评价。

它包括以下组件：

用于自动生成精灵和内嵌图像的API
提供调用API的便捷方式的控件和帮助器

第二版中添加的功能：

用于Web窗体的CSS链接控件（为用户的浏览器选择合适的CSS文件，但不显示图像）
使用App_Sprites以外的自定义文件夹路径
更改精灵图像的平铺方向
将生成的CSS与用户自己的CSS合并

未来版本正在考虑的功能：

自动选择最有效的精灵背景颜色
自动缩小渲染的CSS
针对.NET 3.5进行编译

Answer 10

Tonttu是基于Adobe AIR的应用程序，它为创建功能强大的CSS Sprites图像提供了简便的界面。您可以指定FiledWidth和FieldHeight或对图像进行排序 Create CSS Sprites Images with Tonttu Desktop Tool

Answer 11

Compass CSS Framework有automatic sprite generation。

Answer 12

不是直接的答案，而是对我的开发人员和网络集成商，考虑简单地将每个精灵对齐为2的幂;例如16像素或32像素网格。它可以更轻松地计算CSS文件中的偏移量。因为gifd和png格式压缩得非常好，所以之间的所有空白都无关紧要。

Answer 13

如果你在rails上使用ruby，有一个易于安装的库来生成css sprites。

http://github.com/aberant/spittle

Answer 14

有一个名为ActiveSprites的新工具，它是active_assets gem的一部分。

Github：http://bitly.com/eRTwU4

你使用ruby dsl定义你的精灵，然后做“耙子精灵”，然后生成精灵和相应的样式表。

这是拉！

以下是一些示例代码，

# config/sprites.rb
Rails.application.sprites do
  sprite 'sprites/sprite1.png' => 'sprites/sprite1.css' do
    _'sprite_images/sprite1/1.png' => 'a.one'
    _'sprite_images/sprite1/2.png' => 'span.two'
  end
end

Answer 15

https://github.com/northpoint/SpeedySprite

这个工具采用了一种新颖的方法，因为它可以动态地将您请求的图像组装为http服务。这使得整个过程非常简单（无需预处理，随时更改图像）：启动服务，然后在HTML中引用您想要的任何图像：

<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />

因为它是动态的，你甚至可以从一组动态图像制作精灵，例如缩略图页面。虽然不支持JPEG，但PNG和GIF工作正常。

Answer 16

这是一个combines images via a Photoshop script into CSS sprites的脚本。它不会像你要求的那样做精灵地图，但如果它们的大小相同，它会将图像组合成两个（2,4,8）的倍数。我更喜欢组合相似的图像（正常，悬停，选定，选定的父级），而不是将所有图像合并到一个文件中。

Answer 17

如果你喜欢Java，那么你可以使用带有“ImageBundle”的GWT 1.5+。 GWT编译器将为您处理所有令人讨厌的细节。您甚至不必编写单行JavaScript代码或编写任何CSS。

Answer 18

我建议您使用Sprite Master Web。我自动生成精灵表并为您导出CSS代码。它总是尝试使用高级算法生成最小的精灵表。

以下是截图和youtube video

enter image description here

Answer 19

这些工具都没有达到我的要求，所以我写了一个使用Mark Tylers的微小图像库，mtpixel（现在是mtcelledit的一部分）它不是超级广泛的，但它可以通过mtpixel的内置函数轻松扩展，包括：灰度，颜色反转，旋转，锐化，量化，分色，翻转（垂直和水平），变换，rgb->索引，索引 - ＆gt ; rgb，边缘检测，浮雕，绘制多边形，文本等。

你要做的就是将一组图像作为args（支持png，gif和jpeg）传递给它，它会输出一个名为sprite.png的rgb png以及有用的图像切片数据到stdout。我在bash脚本中使用它来spritify整个图像目录并输出切片数据以自动生成css（希望最终能够用一些创造性的sed / awk自动替换现有的img标签）

puppy linux的二进制包将在这里：

http://murga-linux.com/puppy/viewtopic.php?t=82009

我的用例只需要将图像垂直拼接到一个新的png中，所以就是这样，但我的源代码是公共域，而mtcelledit库是gpl3。 mtpixel静态链接，二进制是＆lt; 100kb（动态链接时只有几kb），唯一的其他依赖是libpng，libjpeg和libgif（和官方mtpixel的freetype，但我不需要文本支持，所以我在静态构建中注释掉了freetype位

随意修改以满足您的需求：

#include <stdlib.h> 
#include <stdio.h> 
#include <string.h> 
#include <mtpixel.h> 

int main( int argc, char *argv[] ){ 
int i=0,height=0,width=0,y=0; 
mtpixel_init(); 
mtImage *imglist[argc]; 
argc--; 
do{   imglist[i] = mtpixel_image_load( argv[i+1] ); 
   height+=imglist[i]->height; 
   if (imglist[i]->width > width) width=imglist[i]->width; 
} while (++i < argc); 
imglist[argc]=mtpixel_image_new_rgb(width,height); 
imglist[argc]->palette.trans=0; 
i=0; 
do{   if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED) 
      mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); 
   else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); 
   printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y); 
   y+=imglist[i]->height; 
   mtpixel_image_destroy( imglist[i] ); 
}while (++i < argc); 
   mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); 
mtpixel_quit(); 
return 0; 
}

Answer 20

如果您使用的是.net，请查看http://www.RequestReduce.com。它不仅自动创建精灵文件，而且还可以通过HttpModule动态执行，同时合并和缩小所有CSS。它还使用量化和无损压缩优化精灵图像，并使用ETags和Expires标头处理生成文件的服务，以确保最佳的浏览器缓存。设置很简单，只需要一个简单的web.config更改。请参阅我的blog post有关Microsoft Visual Studio和MSDN示例库采用它的信息。

Answer 21

我最近找到了这个工具：SpriteRight http://spriterightapp.com/

SpriteRight是Mac的CSS spritesheet生成器，可让您导入现有的图像或样式表。使您的网站加载速度更快，降低带宽成本并节省时间。 SpriteRight甚至可以动态生成CSS代码。

制作CSS精灵的工具？

21 个答案: