Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 262 lines (136 sloc) 12.234 kb
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
1
2 <!doctype html>
3 <!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <title>Using Data URIs in CSS | Divya Manian</title>
8 <meta name="author" content="Divya Manian">
9
10 <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;">
11
12
13 <meta name="viewport" content="width=device-width, initial-scale=1">
14
15
16 <link rel="canonical" href="http://nimbupani.github.com/using-data-uris-in-css.html">
17 <link href="/stylesheets/screen.css" rel="stylesheet">
18 <link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
19 <link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
20
21 </head>
22
23
24 <body >
25 <div class="container">
26 <div class="content">
27 <header role="banner"> <h1><a href="/">Divya Manian</a></h1>
28
29 <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>
30
31 </header>
32 <nav class="sitenav"><a href="/">Home</a>
33 <a href="/archives">Archives</a>
34 <a href="/about.html">About</a>
a4c458e @nimbupani Site updated at 2013-05-10 20:53:38 UTC
authored
35 </nav>
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
36
37
38
39
40
41
42
43
44 <article>
45 <nav class="article">
46
47 <a class="previous" href="/book-reviews-for-november-2009-part-2.html" title="Book Reviews for November 2009 — Part 2">&#x276C;</a>
48
49
50 <a class="next" href="/redesign-of-nimbupani-com.html" title="Redesign of nimbupani.com">&#x276D;</a>
51
52
53
54 </nav>
55 <header>
56
57
58
59
60
61
62
5310a1e @nimbupani Site updated at 2013-12-12 13:59:18 UTC
authored
63 <time datetime="2009-11-28T00:00:00+05:30" pubdate><span class='month'>Nov</span> <span class='day'>28</span> <span class='year'>2009</span></time>
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
64
65 <h1 class="entry-title"><a href="/using-data-uris-in-css.html">Using Data URIs in CSS</a></h1>
66
67
68
69
70 </header>
71 <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>
72
73
74
75
76 <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>
77
78
79 <pre>
80 <code>
81 span.button {
82 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);
83 }</code>
84 </pre>
85
86
87 <p>See <a href="http://nimbupani.com/demo/datauri/index.html">how it looks</a></p>
88
89
90 <p>Data URIs are always of this format:</p>
91
92
93 <pre>
94 <code>data:[&lt;mediatype&gt;][;base64],&lt;data&gt;</code>
95 </pre>
96
97
98 <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>
99
100
101 <ul>
102 <li>font/opentype</li>
103 <li>application/x-font-ttf</li>
104 <li>image/png</li>
105 <li>image/gif</li>
106 <li>image/jpeg</li>
107 <li>image/svg+xml</li></ul>
108
109
110 <p>Data URIs can be used in the CSS in many ways.</p>
111
112
113
114
115 <h3>Embedding Images in CSS</h3>
116
117
118 <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>
119
120
121
122
123 <pre>
124 <code>.button {
125 background:url(data:image/png /*embed code */)
126 }
127
128 .button.active {
129 background-position:0 -40px;
130 }
131
132 .button:hover {
133 background-position: 0 -20px;
134 }
135 </code></pre>
136
137
138
139
140 <p>See a <a href="http://nimbupani.com/demo/datauri/index.html#sprite">demo of embedding images with data URI scheme</a></p>
141
142
143 <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>
144
145
146 <p></p>
147
148 <h3>Embedding Web Fonts in CSS</h3>
149
150
151 <p>Most browsers allow fonts to be embedded using Data URI scheme.</p>
152
153
154 <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>
155
156
157 <p></p>
158
159 <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>
160
161
162 <h3>Advantages</h3>
163
164
165 <ul>
166 <li><a href="http://www.stevesouders.com/blog/2009/11/16/cssembed-automatically-data-uri-ize/">Fewer HTTP requests</a>.</li>
167 <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>
168 <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>
169 </ul>
170
171
172 <p></p>
173
174 <h3>Drawbacks</h3>
175
176
177 <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>
178 <li>Not easy to maintain. Any change to the image or font needs to be added correctly to the CSS.</li></p>
179 </div>
180
181 <footer>
182 <p class="meta">This post was posted by
183
184
185 <a href="/about.html">Divya Manian</a>
186 on
187
188
189
190
191
192
5310a1e @nimbupani Site updated at 2013-12-12 13:59:18 UTC
authored
193 <time datetime="2009-11-28T00:00:00+05:30" pubdate><span class='month'>Nov</span> <span class='day'>28</span> <span class='year'>2009</span></time> in
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
194
195 <span class="categories">
196
197 <a class='category' href='/categories/web-development/'>Web Development</a>
198
199 </span>
200
201 . 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>.
202 </p>
203 </footer>
204 </article>
205
206 <section>
207 <h1>Comments</h1>
208 <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>
209 </div>
210 </section>
211
a4c458e @nimbupani Site updated at 2013-05-10 20:53:38 UTC
authored
212
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
213 </div>
214 </div>
215 <aside id="articles">
5310a1e @nimbupani Site updated at 2013-12-12 13:59:18 UTC
authored
216 <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> lives in SF. <a href="/about.html">More about me ❭</a></p>
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
217 <h2>Posts on Web Development</h2>
a4c458e @nimbupani Site updated at 2013-05-10 20:53:38 UTC
authored
218 <ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><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 class="btn" href="/categories/web-development/">More</a></li></ul>
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
219 </aside>
220 <footer role="contentinfo"><p>
6c3ac34 @nimbupani Site updated at 2013-05-10 00:34:01 UTC
authored
221 Copy to your heart’s content 2013 - Divya Manian -
c3a7d75 Site updated at 2012-12-05 04:19:32 UTC
Divya Manian authored
222 <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
223 </p>
224
225
226 </footer>
227
228
229 <script type="text/javascript">
230 var disqus_shortname = 'nimbublog';
231 var disqus_developer = 1;
232
233
234 var disqus_url = 'http://nimbupani.com/using-data-uris-in-css.html';
235 var disqus_identifier = 'http://nimbupani.com/using-data-uris-in-css.html';
236
237
238
239
240 (function () {
241 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
242 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
243 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
244 }());
245 </script>
246
247
248 <script src="/javascripts/octopress.js"></script>
249
250 <script>
251 var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
252 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
253 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
254 s.parentNode.insertBefore(g,s)}(document,'script'));
255 </script>
256
257
258
259
260 </body>
261 </html>
Something went wrong with that request. Please try again.