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
420
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
230
User First
pazguille
1
190
#OfflineFirst
pazguille
3
5.9k
ES6 in Production
pazguille
10
3.1k
No me hagas esperar!
pazguille
1
150
Hello, Style Guides!
pazguille
0
250
Decoupling your JavaScript
pazguille
0
170
Progressive Enhancement - Is it still important?
pazguille
0
110
Other Decks in Programming
See All in Programming
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
270
OSS開発者という働き方
andpad
5
1.6k
ソフトウェアテスト徹底指南書の紹介
goyoki
1
120
MLH State of the League: 2026 Season
theycallmeswift
0
200
AI時代に学習する意味はあるのか?
tomoyakamaji
0
100
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
230
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
120
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
1
860
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.4k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
230
testingを眺める
matumoto
1
130
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
KATA
mclloyd
32
14k
Become a Pro
speakerdeck
PRO
29
5.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
The Cult of Friendly URLs
andyhume
79
6.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Scaling GitHub
holman
463
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Git: the NoSQL Database
bkeepers
PRO
431
66k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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!