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
220
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
160
Progressive Enhancement - Is it still important?
pazguille
0
110
Other Decks in Programming
See All in Programming
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.2k
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
250
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
470
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
210
GPUを計算資源として使おう!
primenumber
1
280
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
980
型で語るカタ
irof
0
760
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
910
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
380
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
8.8k
Jakarta EE Meets AI
ivargrimstad
0
170
リッチエディターを安全に開発・運用するために
unachang113
1
210
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
It's Worth the Effort
3n
185
28k
Code Review Best Practice
trishagee
69
19k
Building Applications with DynamoDB
mza
95
6.5k
Code Reviewing Like a Champion
maltzj
524
40k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Six Lessons from altMBA
skipperchong
28
3.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
360
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!