Guymon

data: URI

Ein Tool um Bilder für die Verwendung als data:URI vorzubereiten.

The data: URI scheme allows you to build URLs that embed small data objects.
data: URIs are supported by most modern browsers – you can read about browser support here.
They are very useful in a couple of specific areas such as embedding graphics and other data items in Greasemonkey scripts.

Data URIs

Jon Raasch gibt Tips wann und wie man Data URIs einsetzen kann – und natürlich wie man dem IE dieses Feature beibringt.

Although data URIs are an excellent way to reduce HTTP requests, it doesn’t make sense to use them in every situation. Since they embed the raw file data directly in the stylesheet, data URIs can lead to stylesheet bloat if they are used heavy-handedly.

Data URIs are great for any imagery that is repeated on all the pages of your site. However, for page-specific images it is usually better to reference an external image in the stylesheet. Since the file data is embedded directly in the stylesheet, data URIs will be downloaded by all your site’s visitors, regardless of whether they hit the page with that particular image. That said, you can feel free to embed page-specific data URIs on the individual page, just take care not to include them in a site-wide stylesheet.

Tool für Data URIs

cssembed ist ein Tool zum Encoden von Bildern als Data URIs in CSS.

Nicholas Zakas has created the outstanding tool CSSEmbed, which takes a CSS file as input, goes through it and encodes all image references to base64. This means that the action of changing all your image references in your CSS file to base64-encoded is a matter of seconds!

Just download the cssembed JAR file, put it wherever you like (placed in the same directory as the CSS file below for simplicity) and then call it like this:

java -jar cssembed-0.3.2.jar styles.css > styles-base64.css

Hm, das werde ich mal testen.

via Robert’s Talk

Performance: Data URIs for CSS Images

Rob Flaherty vergleicht die Ladegeschwindigkeit einer Seite mit externen Bildern und einer Seite in der die Bilder mittels Data URIs eingebunden werden.

So we do end up a little bit faster, but not as much as we might expect after reducing our HTTP requests by 91%.
What do you think? Are these savings enough to justify the extra effort? Don’t forget that we still need to take further steps to handle IE6/7. Is there something about this particular page that makes the results atypical?

Ist zwar nur ein erster Text - und nur mit Firefox - aber in jedem Fall spannend, schließlich will man seine Zeit ja nicht mit Optimierungen verbringen die möglicherweise gar nicht helfen.

Data URIs

Stoyan Stefanov erklärt Data URIs – und die Umwege die man machen muss um das in allen IE Varianten zum Laufen zu bekommen.

Data URIs are a way to embed the base64-encoded content of images inside HTML and CSS. Inlining images in markup or stylesheets helps you save precious HTTP requests. It’s an alternative to CSS sprites.
BUT! IE6 and IE7 don’t support data URIs
Yes, for them you can inline the images using MHTML
BUT! Looks like IE7 on Vista and IE7 on Win7 have problems with MHTML

Wie so kann dieser Brower nicht endlich mal sterben! Mit jeder neuen Version wird es komplizierter alle denkbaren Varianten abzufangen.