用于 Ruby on Rails 项目的 CSS Sprite 生成器
我目前正在开发一个大型、高流量的 Ruby on Rails 网站，为了缩短页面加载时间，我们正在考虑对背景图像进行精灵化。似乎有很多工具，但许多都处于开发的早期阶段，而且许多不支持我们需要的某些功能。
对我们来说重要的功能：
- x 或 y 重复
- 自动化与我们的 rake 构建
- 透明度
- 生成 sprite 图像和 css 自动
- 成熟
- 易于维护
- 开源
如果它是用 Ruby 编写的，那将是一个额外的好处，但只要它可以就不是必需的与耙子/盖设置集成。
是否有任何 css sprite 工具最适合（全部？）这些标准？
I'm currently working on a large, highly trafficked Ruby on Rails website and in order to get our page load times down, we are looking at spriting our background images. There seem to be a lot of tools out there but many are in the early stages of dev and many don't support some of the features we need.
Features which are important to us:
- x or y repeating
- automation with our rake build
- transparency
- generates sprite image and css automatically
- mature
- easy to maintain
- open source
If it was written in Ruby, that would be a bonus but is not essential as long as it can integrate with a rake/cap setup.
Are there any css sprite tools out there which fit most(all?) of these criteria?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
为什么不使用 data-uri 而不是分割图像呢？ Jammit 可以生成 CSS 文件，其中包含编译为 data-uri 对象的小图像。这实际上比 sprite 表的性能更高，因为这意味着您只有一个用于样式表的 HTTP 连接，而不是一个用于样式表和一个用于 sprite 表的连接。
要使用它，您只需在路径中的某处使用 /embed/ 引用您的小图像（图标、重复背景等），它就会生成 data-uri、MHTML 和样式表的纯文本版本，以服务于各种浏览器。
Jammit 还将多个样式表（和 Javascript）编译到一个文件（每种类型）中，并且如果您想对 AJAX 响应进行超级优化，也可以使用一些 Javascript 模板内容。
缺点是 a) 如果您多次引用图像，则每次引用都会编译该图像，b) 更改图像会导致客户端需要重新下载整个样式表。但是，由于这些资产通常很少发生变化，因此它可以成为一种可以加快页面加载速度的解决方案，而不会为您的开发过程增加任何额外的开销。
为了缓解这两个问题，您可以有一个单独的样式表，仅用于图像引用，因此您将有一个用于正常布局的样式表，然后是另一个将所有 data-uri 资源编译到其中的样式表。这将导致两个 HTTP 请求，但这意味着您可以更改 CSS 或嵌入的图像，而无需强制重新下载整个样式的另一半。
Rather than spriting images, why not use data-uri? Jammit can generate CSS files with small images compiled in as data-uri objects. This is actually even more performant than sprite sheets, because it means that you only have one HTTP connection for the stylesheet, rather than one for the stylesheet and one for the sprite sheet.
To use it, you just have your small images (icons, repeating backgrounds, etc) referenced with /embed/ in the path somewhere, and it'll generate data-uri, MHTML, and plain versions of your stylesheets for serving to various browsers.
Jammit also does compilation of multiple stylesheets (and Javascripts) into one file (per type), and can make use of some Javascript templating stuff too, if you want to get super-optimized with your AJAX responses.
Downsides are that a) if you reference an image more than once, it gets compiled in for each reference, and b) changing an image results in clients needing to re-download your whole stylesheet. However, since those assets generally change fairly rarely, it can be a solution that results in far faster page loads without adding any additional overhead to your development process.
To mitigate both of those, you could have a separate stylesheet that is just for image references, so you'd have one stylesheet for normal layouts, and then another that all your data-uri resources get compiled into. This would result in two HTTP requests, but it means that you could change your CSS or your embedded images without forcing a re-download of the whole other half of your styling.
Chris 建议通过 Jammit 使用 data-uri 的一大缺点是它不支持 IE6/7。
One big negative about Chris's suggestion to use data-uri via Jammit, is that it doesn't support IE6/7.
有一个名为 active_assets 的新 gem，它可以让您与 Rails 堆栈完全集成。请访问 github 查看。 gem 让您可以定义精灵，包括要包含在精灵中的图像列表，然后生成精灵和相应的样式表。上面链接的自述文件包含所有信息。
There's this new gem called active_assets that gives you full sprite integration with your rails stack. Check it out at github. The gem let's you define your sprites including the list of images to include in the sprite and then generates the sprite and the corresponding stylesheet. The readme at the above link has all the info.