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
220
User First
pazguille
1
180
#OfflineFirst
pazguille
3
5.9k
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
110
Other Decks in Programming
See All in Programming
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
800
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
120
Select API from Kotlin Coroutine
jmatsu
1
180
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
GoのWebAssembly活用パターン紹介
syumai
3
10k
Development of an App for Intuitive AI Learning - Blockly Summit 2025
teba_eleven
0
120
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
380
2度もゼロから書き直して、やっとブラウザでぬるぬる動くAIに辿り着いた話
tomoino
0
160
GraphRAGの仕組みまるわかり
tosuri13
7
450
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
2
580
SODA - FACT BOOK
sodainc
1
1.1k
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.6k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Being A Developer After 40
akosma
90
590k
Embracing the Ebb and Flow
colly
86
4.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Thoughts on Productivity
jonyablonski
69
4.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Site-Speed That Sticks
csswizardry
10
650
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!