Permalink
Browse files

[Sass Extensions] The inline_image() function can now be used to gene…

…rate a data url that embeds the image data in the generated css file.

This function works like image_url() in that it expects the image to be a path relative to the images directory.

There are clear advantages and disadvantages to this approach.
See http://en.wikipedia.org/wiki/Data_URI_scheme for more details.

NOTE: Neither IE6 nor IE7 support data urls.
Using this approach with large images is discouraged.
  • Loading branch information...
chriseppstein committed Jun 28, 2009
1 parent 2ecf9f7 commit 5a015b3824f280af56f1265bf8c3a7c64a252621
@@ -10,7 +10,7 @@ body.blueprint
.container
+container
.showgrid
+showgrid
:background= inline_image("grid.png")
hr
+colruler
hr.space
@@ -1,7 +1,7 @@
module Compass::SassExtensions::Functions
end
['selectors', 'enumerate', 'image_url', 'display'].each do |func|
['selectors', 'enumerate', 'image_url', 'display', 'inline_image'].each do |func|
require File.join(File.dirname(__FILE__), 'functions', func)
end
@@ -10,6 +10,7 @@ module Sass::Script::Functions
include Compass::SassExtensions::Functions::Enumerate
include Compass::SassExtensions::Functions::ImageUrl
include Compass::SassExtensions::Functions::Display
include Compass::SassExtensions::Functions::InlineImage
end
# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
@@ -0,0 +1,35 @@
require 'base64'
module Compass::SassExtensions::Functions::InlineImage
def inline_image(path, mime_type = nil)
path = path.value
real_path = File.join(Compass.configuration.project_path, Compass.configuration.images_dir, path)
url = "url('data:#{compute_mime_type(path,mime_type)};base64,#{data(real_path)}')"
Sass::Script::String.new(url)
end
private
def compute_mime_type(path, mime_type)
return mime_type if mime_type
case path
when /\.png$/i
'image/png'
when /\.jpe?g$/i
'image/jpeg'
when /\.gif$/i
'image/gif'
when /\.([a-zA-Z]+)$/
"image/#{Regexp.last_match(1).downcase}"
else
raise Compass::Error, "A mime type could not be determined for #{path}, please specify one explicitly."
end
end
def data(real_path)
if File.readable?(real_path)
Base64.encode64(File.read(real_path)).gsub("\n","")
else
raise Compass::Error, "File not found or cannot be read: #{real_path}"
end
end
end
@@ -1 +1,3 @@
.showgrid { background-image: url(http://assets2.example.com/images/grid.png?busted=true); }
.inlinegrid { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUEAYAAACv1qP4AAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAZ0lEQVRYw+3QwQ2AIBAFUTEUwI3+uzN7gDscsIgxEuO8An52J11X73OudfxMraXkzHfO3Y98nQEhA0IGhAwIGRAyIGRAyICQASEDQgaEDAgZEDIgZEDIgJABoZzSGK3tPuN9ERFP7Nw4fg+c5g8V1wAAAABJRU5ErkJggg=='); }
@@ -1,2 +1,6 @@
.showgrid
background-image= image_url("grid.png")
.inlinegrid
background-image= inline_image("grid.png")

3 comments on commit 5a015b3

@tdreyno

This comment has been minimized.

Show comment
Hide comment
@tdreyno

tdreyno Jun 28, 2009

Contributor

Holy cow that is cool! Which browsers support inline images?

Contributor

tdreyno replied Jun 28, 2009

Holy cow that is cool! Which browsers support inline images?

@chriseppstein

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Jun 29, 2009

Member

All modern browsers except ie6 and 7.

Member

chriseppstein replied Jun 29, 2009

All modern browsers except ie6 and 7.

@amrnt

This comment has been minimized.

Show comment
Hide comment
@amrnt

amrnt replied Jun 22, 2013

👍

Please sign in to comment.