Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 5dc1495f05
Fetching contributors…

Cannot retrieve contributors at this time

264 lines (138 sloc) 12.105 kb
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Using Data URIs in CSS | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="Chris Hills brought Data URIs to my attention in a comment on my post on web fonts. I had not thought about using Data URIs in CSS at all, but others &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/using-data-uris-in-css.html">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
</head>
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
</header>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
</nav>
<article>
<nav class="article">
<a class="previous" href="/book-reviews-for-november-2009-part-2.html" title="Book Reviews for November 2009 — Part 2">&#x276C;</a>
<a class="next" href="/redesign-of-nimbupani-com.html" title="Redesign of nimbupani.com">&#x276D;</a>
</nav>
<header>
<time datetime="2009-11-28T00:00:00-08:00" pubdate><span class='month'>Nov</span> <span class='day'>28</span> <span class='year'>2009</span></time>
<h1 class="entry-title"><a href="/using-data-uris-in-css.html">Using Data URIs in CSS</a></h1>
</header>
<div class="entry-content"><p><a href="http://chaz6.com">Chris Hills</a> brought Data URIs to my attention in a <a href="http://nimbupani.com/blog/font-in-your-face.html#comment-3137" title="Font in your face | Nimbupani Designs">comment on my post on web fonts</a>. I had not thought about using Data URIs in CSS at all, but <a href="http://www.nczonline.net/blog/2009/10/27/data-uris-explained/" title="Data URIs explained | NCZOnline">others have</a>.</p>
<p><a href="http://en.wikipedia.org/wiki/Data_URI_scheme">Data URIs</a> allow any file to be embedded inline within CSS. Here is an example of a Data URI:</p>
<pre>
<code>
span.button {
background:url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%04gAMA%00%00%D8%EB%F5%1C%14%AA%00%00%00%20cHRM%00%00n%20%00%00r%EC%00%00%F7I%00%00%84%FA%00%00o%83%00%00%E8!%00%001%BA%00%00%17%89%0FO%F3%95%00%00%02%17IDATx%DA%9C%93%B1N%DB%60%14%85%3FCH%93%105(U%91%CA%D0%20%86H%9D%9A%A5b%23%EE%134oP%18%EC%81%2C%3C%02%8F%90%0EV%8534%7D%83%F4%0D%D2%BDj%93%AD%88%A5%0D%86%E0%10'.%B1%0D6%8E%DD%A1%BF%2B%20%E9%D2%23%FD%CB%D5%3D%E7%DE%7B%FE%7B%A58%8E%01%90%24%89%04%AA%A6T%81%03%40%06%D6D%B8%0B4%F4z%F3c%92%17%C71%D2C%01US%DE%02%AD%E2%93%22%A5%E7%252%99%0CQ%14a%9A%26%FD~%9F(%8AZz%BD%B9%A7j%CA%CB%A3%7D%BDwO%40T%EE%94%CBe%96V%24%EC%A9M%1CEd%1EeyZ%5C'%08%02%8E%BF%1F%E3%FB~%07%90%8F%F6ui%89%FB8(%16%8BL%DD)'''X%17%16%8E%ED%12%FA!%D6dD6%9Bekk%8B%E5%95e9!%3C%14%A8%8D%C7c%7Bp68%9C%05QES%DEK%AE%E3%C9g%C6y%7B8%18b%0CNy%5C(%B0%FDj%FB%2F!%F5%40%A0%0B%D4%F4z%F3g%12%D0%EB%CD%CF%AA%A6l%BA%AEWc%05n%A3%80r%E9%C5%BC%80%AA)%1F%80%06%60%DFU%14%BE%B4%00%FCk%1F%3F%B8%E1%AB%F7ea%07%BB%E2%A1jJ%17h%03m%D1A%05%90C%7FV%03%E4%D0%BB%5E%3C%C2%CEN%95%20%F0q%1C%A7b%18F%C5%B6%EDCUSjz%BD%F9%09%E8%01%EFTM)%88%FD%A8%CD%99%D8%3B%FE%86%EB%3A%A4%D3%E9%24%D4%10d%EEx%F2K%F8%B47%D7%81%7B%E30%BE%B2%C8g%F3%84%B3%10%A0%A2jJU%8C%91T%DE%15%D5%E7%05fn%C4hf%91ZO%B1%B1%F1%0C%C7q%E4%D1%C8%EA%A8%9A%02%12%AC%E6s%C41x%8E%D7%5D%E8A%1C%D2%F1%9D%40%1E%A5%2C%D6%0A%05r%B9%1C%A5%D2*11ax%CB%95%3BelN%10%06%CF-%D2%A6%5Eo%BE%06Z%AE%EDqyiaNLL%FB%82%B3%A1%C1%E9%B9%91%90%BB%E2%BB%FF%9C%C0%3F%AE%F1%CD%9DY%13%FC%10%FB%D0%10F%DE%BF%C6%FF%C5%EF%01%00%14%B1%11%2C%14%88%CF%E0%00%00%00%00IEND%AEB%60%82);
}</code>
</pre>
<p>See <a href="http://nimbupani.com/demo/datauri/index.html">how it looks</a></p>
<p>Data URIs are always of this format:</p>
<pre>
<code>data:[&lt;mediatype&gt;][;base64],&lt;data&gt;</code>
</pre>
<p><code>mediatype</code> can be any of the <a href="http://en.wikipedia.org/wiki/MIME#Content-Type">Content Types</a>. The Content Types most useful for CSS are:</p>
<ul>
<li>font/opentype</li>
<li>application/x-font-ttf</li>
<li>image/png</li>
<li>image/gif</li>
<li>image/jpeg</li>
<li>image/svg+xml</li></ul>
<p>Data URIs can be used in the CSS in many ways.</p>
<h3>Embedding Images in CSS</h3>
<p>Any CSS property that uses the <code>src</code> function can use Data URI scheme to embed data. This means, you can embed a CSS sprite like:</p>
<pre>
<code>.button {
background:url(data:image/png /*embed code */)
}
.button.active {
background-position:0 -40px;
}
.button:hover {
background-position: 0 -20px;
}
</code></pre>
<p>See a <a href="http://nimbupani.com/demo/datauri/index.html#sprite">demo of embedding images with data URI scheme</a></p>
<p>This only works on Firefox 2+, Opera 7.2+, Chrome, Safari, IE 8+. For earlier IE versions, you can use a <a href="http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/" title="MHTML - when you need data: URIs in IE7 and under / Stoyan's phpied.com">MHTML workaround</a> in your IE-specific stylesheet.</p>
<p></p>
<h3>Embedding Web Fonts in CSS</h3>
<p>Most browsers allow fonts to be embedded using Data URI scheme.</p>
<p>Robert Accettura wrote a great article investigating <a href="http://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/">Data URLs in @font-face</a>. His demo page renders the embedded fonts correctly in Opera 10, Firefox 3.5, and Safari 4.</p>
<p></p>
<p>IE 8 (the only IE that supports data uri scheme), for security reasons, <a href="http://msdn.microsoft.com/en-us/library/cc848897(VS.85).aspx" title="data Protocol">allows only images to be embedded inline</a>, so @font-face will not render embedded fonts.</p>
<h3>Advantages</h3>
<ul>
<li><a href="http://www.stevesouders.com/blog/2009/11/16/cssembed-automatically-data-uri-ize/">Fewer HTTP requests</a>.</li>
<li>If you are using it for @font-face implementation, you can avoid the <a href="http://paulirish.com/2009/fighting-the-font-face-fout/">Flash of Unstyled Text</a> since the font is inline (thanks @<a href="http://twitter.com/paul_irish">paul_irish</a>).</li>
<li>All resources are in one place and if you cannot host images, fonts, you can embed them inline in the stylesheet (Nicholas C. Zakas has written a tool, <a href="http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/">CSSEmbed</a>, that replaces image references in your CSS file as Data URIs). It would also be useful when you create <a href="http://www.wait-till-i.com/2009/09/06/introduction-to-w3c-widgets-my-presentation-at-brighton-barcamp-4/">stand-alone web applications running as widgets</a>. </li>
</ul>
<p></p>
<h3>Drawbacks</h3>
<p><li>Large file sizes. Embedded images work best with small images like icons and arrows. Rob Flaherty has done some excellent research into <a href="http://www.ravelrumba.com/blog/css-images-and-data-uris/">real-time performance of inline embedding</a>.</li>
<li>Not easy to maintain. Any change to the image or font needs to be added correctly to the CSS.</li></p>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
on
<time datetime="2009-11-28T00:00:00-08:00" pubdate><span class='month'>Nov</span> <span class='day'>28</span> <span class='year'>2009</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
</span>
. If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2009-11-28-using-data-uris-in-css.md">please send a pull request</a>.
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<aside id="articles">
<p><img class="avatar"
src="http://a2.twimg.com/profile_images/1696865113/me_normal"
height=48> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = 'http://nimbupani.com/using-data-uris-in-css.html';
var disqus_identifier = 'http://nimbupani.com/using-data-uris-in-css.html';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script src="/javascripts/octopress.js"></script>
<script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.