【问题标题】:Tools to make CSS sprites? [closed]制作 CSS 精灵的工具? [关闭]
【发布时间】:2010-10-06 08:30:21
【问题描述】:

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

理想情况下,我想给它一个图像目录和一个引用这些图像的现有 .css 文件,并让它创建一个用所有小图像优化的大图像,并更改我的 .css 文件以引用这些图像.

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

有没有什么好的 Photoshop 插件或成熟的应用可以做到这一点?

【问题讨论】:

  • 您能否详细说明一下,您是否尝试在一张较大的图像上编译所有精灵,然后使用 css 显示包含正确精灵的图像部分。 (推拉门技术)
  • 有没有办法改变背景颜色,这样我就可以在 spritepad 上看到我的白色图标了?
  • 我真的不明白为什么关闭了??似乎有很多很好的有用答案。可以说这应该是一个超级用户的问题,因为我没有提到任何特定的编程语言,但我喜欢我得到的答案,它们显然对许多人有用。
  • 请上帝不要删除这个问题,它是互联网上对这个问题最有用的列表,并且肯定与编程有关(即使它不是一个编程问题) 。这绝对是一个判断电话,应该被模组强行关闭;这就是社区投票关闭系统的用途......

标签: css css-sprites web-performance


【解决方案1】:

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

【讨论】:

  • 哇,多么棒的工具。谢谢!
  • 自从您在此处发布以来,我已经使用您的工具在一些生产网站上工作。这非常简单易行。
  • +1。您的工具比我尝试过的其他工具要好得多。
  • 这是迄今为止最直观的一个......谢谢......(尽管它应该包括精灵的“智能”布局以最大限度地减少性能问题)
  • 谢谢大家! @Harsh,我同意这种布局——我很久以前就开始尝试了,但一直没能成功:github.com/bgrins/InstantSprite/tree/bin-pack
【解决方案2】:

这将为您完成 90% 的工作:CSS Sprite Generator。您仍然需要自己编辑规则,但该工具将为您提供新 CSS 文件所需的代码片段。

【讨论】:

  • @ben 完美!假设它有效;-)
  • 我对这个工具有点不满意,所以我取消选择它作为我选择的答案。它最终裁剪了我的图像,并没有很好地解释为什么它会在图像之间留下很大的空白
  • 我不喜欢这个解决方案,虽然我猜它工作正常。 SpriteMe 似乎工作得更好。
  • 这个工具的问题是图像质量不高。
【解决方案3】:

现在有 Steve Souders 的 Sprite Me。试一试,感觉效果不错。

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

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

【讨论】:

  • +1 这非常容易使用:只需导航到您想要的页面并单击 SpriteMe 书签...它会自动创建图像和 CSS!
  • 这是一个不错的工具,但是,它需要您的图像的 ZIP 文件,并且它放置您的精灵的顺序是 ZIP 顺序。下面的 Brian 工具允许您上传文件并拖放以更改顺序。
  • 我喜欢它有免费的源代码
【解决方案4】:

这看起来很有希望:

http://csssprites.org/

我还发现this article 有一些有用的信息,甚至还有一些值得一读的阅读器。

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

【讨论】:

  • 页面好像不能用了……
  • smartsprites.osinski.name 更名为csssprites.org,所以我为您编辑了它。从我在这里看到的情况来看,它似乎是可以集成到构建过程中的少数选项之一。
【解决方案5】:

【讨论】:

  • 这绝对是合法的。恕我直言,保存的 spritemap 是一个关键,因此只有相关的图像和代码行必须随时间变化,而不是随着每个图像内容的变化重新计算整个坐标集。
【解决方案6】:

ZeroSprites 是一个 CSS 精灵生成器,旨在使用 VLSI 平面布局算法最小化区域。

【讨论】:

    【解决方案7】:

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

    【讨论】:

    • 为什么上传 500kb 会很痛苦?我可能永远不想上传> 100kb
    • 我说这“可能”很痛苦。它有点取决于应用程序没有? .. 一个包含中等大小 PNG 的 zip 文件,例如,在一个相当大的网格上 ~~ 可以接近这个数字。如果它都是小位图,那么肯定/没有问题。
    • 是的,但是 css sprites 的全部意义在于防止大量小图像被许多请求加载。如果你真的有这么多小精灵,那么加载需要很长时间,在这段时间内什么都不会显示。最好保留它们,我认为最多 100kb。你总是可以做几个
    • 我在图像方面做了很多工作。也许不是小的 CSS 位图。所以也许这就是我提出警告的原因。你的需求不同/好的。在大多数宽带上,500kb 将在一秒钟内到达。我是第一个为您的问题提供公认答案的人,在这里我被否决了~投票并捍卫我的语言?随便...
    • 这对我来说很痛苦,因为我开始使用的图像最终是一个比该限制更大的捆绑包,所以我必须先剪裁或优化才能使用它。
    【解决方案8】:

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

    【讨论】:

      【解决方案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 编译

      【讨论】:

        【解决方案10】:

        只需使用http://sprites.scherpontwikkeling.nl/,它也可以从网站 URL 生成精灵……您可以在开发网站后集成您的精灵。它非常易于使用;)

        【讨论】:

          【解决方案11】:

          不是一个直接的答案,但对于我的开发人员和网络集成商,请考虑简单地将每个精灵与 2 的幂对齐;例如 16 像素或 32 像素的网格。它使计算 CSS 文件中的偏移量变得更加容易。 gifd 和 png 格式之间的所有空白都无关紧要。

          【讨论】:

          • 很好的提示,虽然我主要尝试将文本标题(每个 1-2kb)合并到一个文件中。我不太担心空白,因为我知道它会被压缩 - 我只是不完全理解为什么制作精灵的工具会占这么多
          • 对此有一点警告 - 虽然图像中的空白将被压缩以进行传输,但在加载浏览器时它会被扩展并占用内存。盲目使用自动精灵生成工具会导致一些巨大的图像,这会导致这些页面上的内存使用量激增。在对图像进行分组以形成精灵表时需要小心谨慎,以将其保持在合理的范围内。
          • 山姆:没错!后来发现了这个。如果精灵图像非常宽或高,则需要考虑!特别是对于手机应用程序(内存较少)。 Simon:留白可能是因为 CSS 的限制。即使你在背景上使用 no-repeat,sprite 图像也会通过填充、行高和基本上所有元素的背景区域显示,除了边距和边框。例如,假设您有一个链接图标。如果链接跨越多行,则精灵的其他图标可能会显示出来。添加足够的空白使这更加“有弹性”。
          • @Simon_Weaver - 在这里根据大家的反馈,我发布了一个简单的精灵工具stackoverflow.com/a/13281578/1162141
          【解决方案12】:

          Compass CSS 框架有automatic sprite generation

          【讨论】:

          • 不使用 Compass 生成 Sprite 的人数之多令我震惊。指南针就是为此而生的……
          【解决方案13】:

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

          【讨论】:

            【解决方案14】:

            这是combines images via a Photoshop script into CSS sprites 的脚本。它不会按照您的要求进行精灵图,但如果它们的大小相同,它将以两个(2、4、8)的倍数组合图像。我更喜欢组合相似的图像(普通、悬停、选定、选定的父级),而不是将所有图像放在一个文件中。

            【讨论】:

              【解决方案15】:

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

              http://github.com/aberant/spittle

              【讨论】:

                【解决方案16】:

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

                Github:http://bitly.com/eRTwU4

                您使用 ruby​​ dsl 来定义您的 sprite,然后执行“rake sprites”并生成 sprite 和相应的样式表。

                太棒了!

                这里有一些示例代码,

                # 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
                

                【讨论】:

                  【解决方案17】:

                  https://github.com/northpoint/SpeedySprite

                  此工具采用了一种新颖的方法,它将您请求的图像作为 http 服务即时组装。这使得整个过程非常简单(无需预处理,随时更改图像):您启动服务,然后在 HTML 中引用您想要的任何图像:

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

                  由于它是动态的,您甚至可以从一组动态图像(例如缩略图页面)中制作精灵。虽然不支持 JPEG,但 PNG 和 GIF 可以正常工作。

                  【讨论】:

                    【解决方案18】:

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

                    这是截图和youtube video

                    【讨论】:

                    • 值得注意的是,这不是一个免费或开源的应用程序,但价格合理,为 3.99 美元。它构建良好,并且可以进行良好的 PNG 压缩。
                    • 仅限 Mac。糟糕,这个看起来很有希望。
                    【解决方案19】:

                    这些工具都不符合我的要求,所以我写了一个使用 Mark Tylers 的微型图像库 mtpixel(现在是 mtcelledit 的一部分) 它不是超级广泛,但可以通过 mtpixel 的内置功能轻松扩展,包括:灰度、颜色反转、旋转、锐化、量化、分色、翻转(垂直和水平)、变换、rgb->indexed、indexed->rgb 、边缘检测、浮雕、绘制多边形、文本等。

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

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

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

                    我的用例只需要将图像垂直拼接成一个新的 png,就这样,但我的源代码是公共领域的,mtcelledit 库是 gpl3。使用 mtpixel 静态链接,二进制文件

                    根据自己的需要随意修改:

                    #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; 
                    }
                    

                    【讨论】:

                      【解决方案20】:

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

                      【讨论】:

                        【解决方案21】:

                        我最近发现了这个工具:SpriteRight http://spriterightapp.com/

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

                        【讨论】:

                        • 值得注意的是,这不是免费或开源应用程序,但价格合理,为 4.99 美元。它构建良好,PNG 压缩效果很好,比上面的“Sprite Master Web”功能更多。
                        • 它也只有mac。
                        猜你喜欢
                        • 1970-01-01
                        • 2012-03-12
                        • 2017-04-19
                        • 2023-03-31
                        • 2012-08-23
                        • 1970-01-01
                        • 2023-03-15
                        • 1970-01-01
                        相关资源
                        最近更新 更多