Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Sprites vs. Data URIs
Search
Guille Paz
January 10, 2014
Programming
0
410
CSS Sprites vs. Data URIs
Are Data URIs better than CSS Sprites?
@pazguille & @taly
Guille Paz
January 10, 2014
Tweet
Share
More Decks by Guille Paz
See All by Guille Paz
The Road to Node
pazguille
0
220
No me robes el Scroll!
pazguille
0
210
User First
pazguille
1
180
#OfflineFirst
pazguille
3
5.8k
ES6 in Production
pazguille
10
3.1k
No me hagas esperar!
pazguille
1
140
Hello, Style Guides!
pazguille
0
240
Decoupling your JavaScript
pazguille
0
150
Progressive Enhancement - Is it still important?
pazguille
0
100
Other Decks in Programming
See All in Programming
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
テスト分析入門/Test Analysis Tutorial
goyoki
11
2.7k
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
tris5572
2
540
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
110
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
180
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
120
「兵法」から見る質とスピード
ickx
0
200
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
2
270
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
620
CQRS/ESのクラスとシステムフロー ~ RailsでフルスクラッチでCQRSESを組んで みたことから得た学び~
suzukimar
0
190
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
It's Worth the Effort
3n
184
28k
Making Projects Easy
brettharned
116
6.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
79
Building an army of robots
kneath
306
45k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Gamification - CAS2011
davidbonilla
81
5.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
4 Signs Your Business is Dying
shpigford
183
22k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Transcript
Data URI The myths
Base64
http://tools.ietf.org/html/rfc3548 Encoding data (files) in plain text
Data URIs Uniform Resource Identifier
A way to include data in a web page
Syntax
<img src=“data:image/png;base64,IVBOR...”>
<img src=“data:image/png;base64,IVBOR...”> • data - name of the scheme
<img src=“data:image/png;base64,IVBOR...”> • data - name of the scheme ◦
image/png - content type
<img src=“data:image/png;base64,IVBOR...”> • data - name of the scheme ◦
image/png - content type • base64 - type of encoding used to encode
<img src=“data:image/png;base64,IVBOR...”> • data - name of the scheme ◦
image/png - content type • base64 - type of encoding used to encode • IVBOR… - the encoded data
Why it rocks
Reduce the number of HTTP requests.
The ability to embed files inside of others files (CSS,
JS, images in-lined in the HTML)
Performance enhancement.
Sure?
None
None
Data URI http://www.webpagetest.org/result/131227_FM_JD4/1/details/
Data URI http://www.webpagetest.org/result/131227_FM_JD4/1/details/
Data URI http://www.webpagetest.org/result/131227_FM_JD4/1/details/
Sprites http://www.webpagetest.org/result/131227_WR_JDT/1/details/
Sprites http://www.webpagetest.org/result/131227_WR_JDT/1/details/
Sprites http://www.webpagetest.org/result/131227_WR_JDT/1/details/
Sprites Data URI
It Sucks!
Increase the size of your HTML document or CSS file.
Sprites Data URI
Make the files themselves larger.
Are not separately cached from their containing document
IE8 limits data URIs to a maximum length of 32
KB.
It’s a pain to maintain
Bad User Experience: 100ms interactivity budget.
None
None
None
Recap
Are not always the best solution
Use on very small resources
Thank you!