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

[gorakhargosh]

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

[marcboeker]

Thanks for submitting :)

[matthew-dean]

Cool function. Probably should be a note that the resulting CSS is only IE8+ compatible and max URI length in IE8 is 32KB.

[marcboeker]

What is IE? Never head of it yet. Can I eat this? :)

Yeah absolutely, we should mention to use this feature with caution.
@gorakhargosh Would it be possible to add this side note to your pull request and submit it again? Thank :)

[gorakhargosh]

Actually, we could add a command line flag that allows
toggling "inline-images" to work like "url" so that a separate
stylesheet can be generated for IE for those who wish to.

Alternatively, this can also be handled by using "url" to target IE directly using
CSS selector classes .ie9, .ie8, which HTML5 bootstrap provides you with.

So for IE, you'd write:

.lt-ie7 #some-element {
background-image: url("blah.png");
}

But this does mean that these resources will be downloaded
by all other browsers as well, so I cannot see any advantages
to doing this. Being able to generate a separate stylesheet
seems advantageous.

Or does anybody have better suggestions?

[marcboeker]

Hm or we just inform the developer, that IE has limited support for data-uri's and let it up to the developer to find a solution.

I'm personally not a friend of patching anything to make it work in IE. Everyone who has to support IE already knows a viable solution to switch between data-uri's and an extra stylesheet for IE.

In the long term, IE (I hope) will support regular data-uri's like most of the other browsers too. And until that, we should use an extra stylesheet.

@gorakhargosh What do you think?

[gcoop]

+1 for this and I agree with @marcboeker everyone who's using less will know how to use an extra stylesheet for IE if they want to support.

[myurasov]

+1!

[myurasov]

I guess in web browser this function should act as a bypass to "url(...)"

[matthew-dean]

I think other things need to be resolved before this could happen. For instance, does a URL reference that I would use to pull the image relative to the LESS file? Or the resulting CSS file? Documentation on that is not clear.

And, as far as I can tell, this would only work in Node-based compilation, correct? If so, this would break browser testing or HTML-based LESS systems.

[maxcan]

For HTML-based compliation it would work if it just "noop'ed" to a url(xxx)
value.

Compass and stylus have no problem with it use the working directory the
command is run from as the root though it can be overridden with a command
line argument.

On Wed, Aug 1, 2012 at 4:04 PM, matthewdl <
reply@reply.github.com

wrote:

I think other things need to be resolved before this could happen. For
instance, does a URL reference that I would use to pull the image relative
to the LESS file? Or the resulting CSS file? Documentation on that is not
clear.

And, as far as I can tell, this would only work in Node-based compilation,
correct? If so, this would break browser testing or HTML-based LESS systems.

---

Reply to this email directly or view it on GitHub:
#775 (comment)

[custa1200]

Is this functionality in .LESS 1.3.0 ? i.e. the current shipping version?

[keithamus]

Would like to get this functionality in a project I'm working on. Compass (SASS) has had this for a while now: Compass/compass@5a015b3

[jgallen23]

Any update on this pull request?

[lukeapage]

could aim for 1.4.0

We're not ignoring pull requests - we've gone from 70 to 17 in 6 months. The fact it hasn't been closed is a good thing ;)

[jneen]

A more general solution might be a function data-uri, which you could use like this:

#selector {
  background-image: data-uri(image/jpeg, path/to/some/image.jpg);
}

One advantage here would be that it could also be used for things like fonts, for example:

@font-face {
  font-family: MyCoolFont;
  src: data-uri(font/ttf, path/to/my-cool-font.ttf) format("truetype");
}

[lukeapage]

closing to take #1086 instead as it has several improvements.