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
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
360
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
100
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
3
320
カクヨムAndroidアプリのリブート
numeroanddev
0
390
Perlで痩せる
yuukis
1
680
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
1.2k
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
140
SODA - FACT BOOK
sodainc
1
700
CSC307 Lecture 17
javiergs
PRO
0
110
GoのWebAssembly活用パターン紹介
syumai
3
9.3k
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
310
漸進。
ssssota
0
1.8k
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
120
Designing for humans not robots
tammielis
253
25k
Docker and Python
trallard
44
3.4k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Practical Orchestrator
shlominoach
188
11k
Faster Mobile Websites
deanohume
307
31k
Raft: Consensus for Rubyists
vanstee
138
7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.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!