Comments on: Detecting Support for data: URIs

By: jpv

jpv — Tue, 01 Dec 2009 12:43:06 +0000

Nice trick, however have you tried to find a way to detect the support non-asynchronously ?

I tried to use this technique not for css specifically but in conjonction with XHR progress event in order to display a real progress bar when loading heavy images (see my post in french, but code is readable : http://jpv.typepad.com/blog/2009/11/barre-de-chargement-dune-image.html)

However due to the various limitations of the browser around the length of data you can put in an URL, you can not load huge images (around 1Mo)
So this technique really should be confined to CSS images

By: Rich

Rich — Fri, 20 Nov 2009 21:02:25 +0000

That’s a very good point – I’d only really thought of them as inline for some reason. I agree, in fact, having thought about it more, almost any small image would be best served in this way.

By: Weston Ruter

Weston Ruter — Sun, 15 Nov 2009 15:30:54 +0000

@Rich: I think they are useful inline if the images are small enough (i.e. a rounded corner) where there is an acceptable cost/benefit ratio of HTTP request count vs. page display time. But also I think that data: URIs make the most sense in stylesheets. Actually, data: URIs in stylesheets are cached because the stylesheet itself should be cached. So when returning to the page, the stylesheet is loaded from the cache and the data: URIs are loaded directly from it.

By: RIch

RIch — Sun, 15 Nov 2009 10:42:16 +0000

My only issue with data uris is that it means the image won’t be cached, which is normally what you want. When would using an embedded image be a better idea?

It’s very rare that an image will be requested only once.

By: Ajaxian » CSS Gradients for All!

Ajaxian » CSS Gradients for All! — Tue, 28 Jul 2009 10:34:26 +0000

[...] not support Canvas, although IE8 does support the data: URI scheme, which is a prerequisite (see support detection method). When/if Gears’s Canvas API fully implements the HTML5 canvas specification, then this [...]

By: The Modern Browser Landscape | Web Design Company - Lounge Lizard | Internet Marketing | Web Site Development

Mon, 13 Jul 2009 15:42:20 +0000

[...] Ability to specify images as data inline in your style sheet. Typically used for small sprites in order to minimize HTTP requests, reducing overall load time. Now possible in all major browsers with the introduction of MSIE 8. Support for older browsers is available through Javascript. [...]

By: Harmen Janssen

Harmen Janssen — Sun, 10 May 2009 22:40:38 +0000

Can you elaborate a bit on that awkward CSS syntax?
Why repeat the background-image rule as a string inside the background-image rule?

Furthermore; a great solution, thanks. It would be nice to come up with a server-side solution which automagically writes data URIs to a stylesheet, since it’s obviously a bit of a hassle to manage such style rules.

By: valums

valums — Sun, 10 May 2009 07:34:04 +0000

Clean and simple, thank you. It’s great that support for data:uri was added is Internet Explorer 8.

By: Weston Ruter

Weston Ruter — Fri, 08 May 2009 13:42:21 +0000

@V1:
If the browser supports data: URIs, the external background images are never loaded because the fallback rules are never applied. My Firebug Net panel don’t show any of those images being loaded, and my YSlow is very happy.

By: V1

V1 — Fri, 08 May 2009 07:09:37 +0000

Wouldn’t this be utterly useless when it comes to performance? You are now loading the images 2x. One as normal and one as base64.