Permalink
Browse files

data-uri: adds `inline-image()` to embed data-URIs

The "inline-image" function reads images, encodes them
using base64 encoding, and embeds them into the generated
CSS files as data-URIs.

More about data-URIs:
http://en.wikipedia.org/wiki/Data_URI_scheme

This causes a significant reduction in the number of
HTTP requests sent although it increases the size of the
resulting CSS code. Multiple occurrences of the same data-URI
are easily handled by server-side GZIP compression and hence
redundancy should not be a drawback for the majority of the
client audience.

The original author of this patch is:
Marc Boeker <marc.boeker@onchestra.com>
  • Loading branch information...
1 parent cb78933 commit cc4d33feb4f2d3ceb6552b6526e49ce9493c89ae Marc Boeker committed with Apr 19, 2012
Showing with 15 additions and 0 deletions.
  1. +15 −0 lib/less/functions.js
View
@@ -201,6 +201,21 @@ tree.functions = {
},
_isa: function (n, Type) {
return (n instanceof Type) ? tree.True : tree.False;
+ },
+ "inline-image": function(ctx) {
+ return {
+ toCSS: function() {
+ var fs = require('fs');
+ var sys = require('util');
+
+ var chunks = ctx.value.split('.');
+ var ext = chunks[chunks.length - 1];
+
+ var mimetype = 'image/' + ext.replace(/jpg/, 'jpeg');
+
+ return 'url("data:' + mimetype + ';base64,' + new Buffer(fs.readFileSync(ctx.value)).toString('base64') + '")';
+ }
+ }
}
};

0 comments on commit cc4d33f

Please sign in to comment.