Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A Rails plugin that automatically replace assets specified in stylesheets with Data URI representations.
Ruby
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib init commit
test init commit
MIT-LICENSE init commit
README.markdown specify format of README (for github)
Rakefile init commit
init.rb init commit
install.rb init commit
uninstall.rb init commit

README.markdown

CssInlineImage

A Rails plugin that automatically replace assets specified in stylesheets with Data URI representations.

Why?

Using Data URI to encode the assets files into stylesheets dramatically reduce the number of HTTP requests to web server. This is a optimization technique when you want to further improve the performance of a sites. Check this post for details: Data URIs make CSS sprites obsolete.

Example

Just use regular stylesheet_link_tag with "cache" options:

<%= stylesheet_link_tag "default", "header", "footer", :cache => "common" %>

As usual, in production mode, rails will generate following stylesheet tag:

<link href="/stylesheets/commons.css?1278520653" media="screen" rel="stylesheet" type="text/css" />

Where common.css combine all content of "default.css", "header.css" and "footer.css". After using this plugin, all images specified by url() in the stylesheet files will be replaced with data uri representation. For example:

.striped_box
{
    width: 100px;
    height: 100px;
    background-image: url("images/bg.gif");
}

will be replace with

.striped_box
{
    width: 100px;
    height: 100px;
    background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");
}

Reference

Copyright (c) 2010 Francis Chong, released under the MIT license

Something went wrong with that request. Please try again.