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
430
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
230
No me robes el Scroll!
pazguille
0
240
User First
pazguille
1
190
#OfflineFirst
pazguille
3
5.9k
ES6 in Production
pazguille
10
3.1k
No me hagas esperar!
pazguille
1
160
Hello, Style Guides!
pazguille
0
260
Decoupling your JavaScript
pazguille
0
170
Progressive Enhancement - Is it still important?
pazguille
0
120
Other Decks in Programming
See All in Programming
Catch Up: Go Style Guide Update
andpad
0
250
品質ワークショップをやってみた
nealle
0
630
CSC305 Lecture 09
javiergs
PRO
0
310
CSC305 Lecture 08
javiergs
PRO
0
280
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
720
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
830
CSC509 Lecture 08
javiergs
PRO
0
250
Cursorハンズオン実践!
eltociear
2
1.2k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.5k
モテるデスク環境
mozumasu
3
1.3k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.5k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
7k
A better future with KSS
kneath
239
18k
Into the Great Unknown - MozCon
thekraken
40
2.1k
GitHub's CSS Performance
jonrohan
1032
470k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Mobile First: as difficult as doing things right
swwweet
225
10k
RailsConf 2023
tenderlove
30
1.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
The Language of Interfaces
destraynor
162
25k
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!