data:urls – what are they and how to use them
If you follow this blog you already know the infamous website performance rule #1 - reduce the number of HTTP requests. Actually, to celebrate Earth Day and to jump the "go-green" wagon/jargon, my favourite performance mantra as of late is "Reduce, Reuse, Recycle" (the Recycle part is a wee fuzzy but, oh well)
So to reduce the number of requests for JavaScript files, you combine all .js into one monolithic file.
Same for .css
For images - use CSS sprites to create one image files that contains all your little icons.
Yet another way to minimize the number of HTTP requests is to use data URLs (proper name is data URI scheme).
"data... uri? urgh-i? An example, please!"
Say you have this minuscule image:
which you include like:
<img src="http://phpied.com/images/check.png" />
This way you're actually using the http URI scheme.
Same thing using data URI will look like:
And the code for it:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
This way the image in inlined in the HTML and there is no extra HTTP request to retrieve it.
data URI syntax
Let's take a look again at this img tag and its slightly disturbing syntax:
<img src="data:image/png;base64,iVBOR..." />
You have:
data- name of the schemeimage/png- content typebase64- the type of encoding used to encode the dataiVBOR...- the encoded data- some , and ; and : sprinked for good measure
How do I base64-encode?
While there are some online tools that will let you upload an image or point to a URL, you can simply do it from PHP and the command line.
Say you have the filename check.png. Then go:
$ php -r "echo base64_encode(file_get_contents('check.png'));"
This will spit out encoded content for copy-pasting pleasure. Naturally you can also do this from your application code, if needed.
Using data URLs in CSS
If you want the same image as a repeating CSS background, you can use it like this:
<div id="data-uri-test"></div>
<style type="text/css">
#data-uri-test {
width: 20px;
height: 20px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");
}
</style>
Where the gist of it really boils down to the same:
background-image: url("data:image/png;base64,iVBOR...");
Lights, camera... IE!
Everybody's favourite part of every technique... IE support. The thing is IE8 supports data URIs. Earlier IEs do not. But, there is a solution involving MHTML, which I'll describe in a follow-up post, since this one turn out kinda longish.
For the impatient and Russian-speaking among you - click here.
This entry was posted on Friday, April 10th, 2009 and is filed under images, performance. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
April 10th, 2009 at 1:34 am
[...] the previous post I described what data: URIs are and how they are useful to reduce the number of HTTP requests. Now, the problem with data: URIs is [...]
April 10th, 2009 at 2:12 am
[...] View original here: data:urls – what are they and how to use them [...]
April 10th, 2009 at 5:57 am
The embedded images can’t be cached between different page loads in most cases, as the HTML is rarely cached. You also have to repeat the data of the image multiple times if the image appear in the HTML document multiple times. These are two big inconvenients, but still, the solution is interesting.
April 10th, 2009 at 11:57 am
Great article Stefan. Finished your book, OO JavaScript and am looking forward to your talk at JS Conf 2009.
April 10th, 2009 at 12:04 pm
But if this image is in several places, like a logo in the header, wouldn’t it be counter productive? You save on http requests, but now the image will never be cached.
Otherwise, I think this is a great in css files or for images that only appear once.
April 10th, 2009 at 2:21 pm
@Joe – Thanks! Hope you liked oojs
@anthony – that’s pretty easy to solve if you have one class name that contains the data: image and then you add the class to all elements that you want, e.g.
.logobg {
background: url(data:…)
}
<div class=”navigation logobg”>..
helo, hello
<div class=”footer logobg”>…
April 19th, 2009 at 6:11 pm
It just happens that I’m reading the article on my E71′s native browser – no support for data:uri’s
.
I have no cyrillic on my mobile but anyway – Hristos Voskrese.
April 22nd, 2009 at 7:41 am
[...] Data urls: putting the data inside the CSS (inline). [...]
May 17th, 2009 at 1:00 pm
[...] recently I’ve been experimenting with data:url to inline background images into the CSS file. This reduces the number of files the browser has to [...]
May 31st, 2009 at 10:41 pm
[...] Phpied.com – data:urls – what are they and how to use them [...]
June 8th, 2009 at 4:25 pm
[...] discovered this method in this brilliant post where the same trick is used to for CSS and to reduce HTTP requests. And by reading that post I [...]
August 17th, 2009 at 4:15 am
Very useful article, Stefan
One important thing about IE8:
“Data URIs cannot be larger than 32,768 characters.”
http://msdn.microsoft.com/en-us/library/cc848897%28VS.85%29.aspx
August 17th, 2009 at 4:25 am
Another thing I missed…
When IE8 runs in IE7 regime it works like IE8 and Firefox or data:uri works as described in this article.
Tested
October 27th, 2009 at 8:00 am
[...] been a fair amount written about data URIs recently: my colleague Stoyan Stefanov has written a couple of posts about data URIs, and my former colleague Hedger Wang also penned a post about how to use [...]
October 28th, 2009 at 8:01 am
[...] Msdn, http://msdn.microsoft.com/en-us/library/cc848897%28VS.85%29.aspx Stoyan, http://www.phpied.com/data-urls-what-are-they-and-how-to-use/, http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ R Reid, Detecting IE 8 [...]
November 1st, 2009 at 2:00 am
[...] 3. 图片素材文件的组织。首先是用好CSS Spirits的优势，回避它维护上的缺点。常犯的问题是，认为它好就把所有素材文件都放进一张图片中，不好维护，也无法重用。所以CSS Spirits的策略是对应CSS规划的，在核心级core.css中把所有定义基本风格的图片素材合并成一张png图，并做优化。不便整合的图（像平铺的虚线）可以用dataURI的方式做到CSS文件中。产品级CSS文件是会较频繁变动的，所以经常变化的素材图片不要放进spirits图中自讨苦吃。 [...]
November 1st, 2009 at 7:36 am
[...] 关于背景整合的问题，其实也提到了，是将整站背景完全整合在一起呢？还是如何整合呢？方案是还是按CSS规则进行，就是全部公用的整合在一张上，频道公用的整合，单独使用的整合。当然还有一些会被频繁更换的背景，这时候就得小了，也可以整合，这你就得考虑清楚，将他们放在整合的背景中的什么位置，便于你更换。克军还提到了关于背景图片的使用，使用dataURI的方式，这种方式听说不会产生http请求数，这个我还得找时间学习学习。 [...]
August 27th, 2010 at 1:55 am
Hi I have a problem in reading the base64 data using javascript which is store in xml
This is exactly what I am trying i have a PHP code
post.php : http://pastebin.com/WqnwphQq this returns one small xml which contents base64 data … which I am calling from AJAX post this is my java script index.html : http://pastebin.com/C0zppqsR
the output of ele.firstChild.nodeValue is different in firefox and chrome
I can see that the string which we get in firefox is totally change form the actual generated PHP response (I have checked it using firebug )… any pointers ??
November 16th, 2010 at 11:15 am
[...] the number of HTTP requests is a must, sprites are cool, but a pain to maintain, so there come data URIs (for all browsers) and MHTML (IE6 and 7). I've talked about these things on this blog to a point [...]
April 28th, 2011 at 6:01 pm
[...] הרעיון של data-uri הוא שאת כל המידע הדרוש להצגת התמונה ניתן לשלב בכתובת, ולחסוך את הצורך באחסון של תמונה כקובץ חיצוני ובקריאת HTTP נוספת. הרעיון קונה לו תומכים ותופס תאוצה, וכלים נלווים מושקים חדשות לבקרים. [...]
May 27th, 2011 at 3:43 am
[...] data:urls – what are they and how to use them [...]
August 28th, 2011 at 4:20 am
[...] URIs (see this, this, and this) and Base64 encoding goes hand-in-hand. This method allows you to embed images [...]
October 14th, 2012 at 11:05 pm
[...] http://www.phpied.com/data-urls-what-are-they-and-how-to-use/ ‹ 안녕하세요! Posted in 미분류 [...]
January 17th, 2013 at 11:23 am
[...] been a fair amount written about data URIs recently: my colleague Stoyan Stefanov has written a couple of posts about data URIs, and my former colleague Hedger Wang also penned a post about how to use [...]
January 17th, 2013 at 5:57 pm
Spot on with this write-up, I honestly believe that this website needs a great deal more attention. I’ll probably be back again to see more, thanks for the information!|
January 17th, 2013 at 9:08 pm
What’s Going down i am new to this, I stumbled upon this I have discovered It absolutely useful and it has helped me out loads. I hope to contribute & help other customers like its helped me. Good job.|
April 27th, 2013 at 7:21 pm
Its like you read my mind! You appear to know so much about this, such as you wrote the book in it or something. I feel that you could do with some percent to drive the message home a little bit, but other than that, this is magnificent blog. A fantastic read. I will definitely be back.