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
190
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
95
Other Decks in Programming
See All in Programming
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
800
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
190
振り返れば奴(Cline)がいる
keiyagi
0
150
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
1.1k
Package Traits
ikesyo
2
230
Amazon Bedrock Multi Agentsを試してきた
tm2
1
260
Rubyでつくるパケットキャプチャツール
ydah
1
610
rails newと同時に型を書く
aki19035vc
6
750
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
390
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
460
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
330
SpringBoot3.4の構造化ログ #kanjava
irof
2
850
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
RailsConf 2023
tenderlove
29
980
Product Roadmaps are Hard
iamctodd
PRO
50
11k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
6
230
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
A Tale of Four Properties
chriscoyier
158
23k
Building Your Own Lightsaber
phodgson
104
6.2k
Typedesign – Prime Four
hannesfritz
40
2.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
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!