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
98
Other Decks in Programming
See All in Programming
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
170
sappoRo.R #12 初心者セッション
kosugitti
0
270
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
100
Unity Android XR入門
sakutama_11
0
180
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.6k
color-scheme: light dark; を完全に理解する
uhyo
7
490
楽しく向き合う例外対応
okutsu
0
590
ML.NETで始める機械学習
ymd65536
0
230
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
220
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
360
バッチを作らなきゃとなったときに考えること
irof
2
520
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
511
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Visualization
eitanlees
146
15k
Git: the NoSQL Database
bkeepers
PRO
427
65k
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!