开发者

CSS Sprite generator for Ruby on Rails project

开发者 https://www.devze.com 2023-01-17 23:39 出处:网络
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 tool

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:

开发者_C百科
  • 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?


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.


One big negative about Chris's suggestion to use data-uri via Jammit, is that it doesn't support IE6/7.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消