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
390
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
210
No me robes el Scroll!
pazguille
0
200
User First
pazguille
1
170
#OfflineFirst
pazguille
3
5.8k
ES6 in Production
pazguille
10
3k
No me hagas esperar!
pazguille
1
130
Hello, Style Guides!
pazguille
0
220
Decoupling your JavaScript
pazguille
0
140
Progressive Enhancement - Is it still important?
pazguille
0
98
Other Decks in Programming
See All in Programming
GoとPHPのインターフェイスの違い
shimabox
2
210
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
170
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
sappoRo.R #12 初心者セッション
kosugitti
0
280
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
930
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
320
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
270
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
700
React 19アップデートのために必要なこと
uhyo
8
1.5k
Datadog Workflow Automation で圧倒的価値提供
showwin
1
180
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Facilitating Awesome Meetings
lara
52
6.2k
Bash Introduction
62gerente
611
210k
Docker and Python
trallard
44
3.3k
We Have a Design System, Now What?
morganepeng
51
7.4k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Why Our Code Smells
bkeepers
PRO
336
57k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
It's Worth the Effort
3n
184
28k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
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!