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
250
Decoupling your JavaScript
pazguille
0
160
Progressive Enhancement - Is it still important?
pazguille
0
110
Other Decks in Programming
See All in Programming
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
820
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
930
XP, Testing and ninja testing
m_seki
3
210
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
570
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
370
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
400
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
230
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Site-Speed That Sticks
csswizardry
10
660
Code Reviewing Like a Champion
maltzj
524
40k
Documentation Writing (for coders)
carmenintech
72
4.9k
Speed Design
sergeychernyshev
32
1k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
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!