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
360
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
200
No me robes el Scroll!
pazguille
0
180
User First
pazguille
1
160
#OfflineFirst
pazguille
3
5.7k
ES6 in Production
pazguille
10
2.8k
No me hagas esperar!
pazguille
1
110
Hello, Style Guides!
pazguille
0
170
Decoupling your JavaScript
pazguille
0
140
Progressive Enhancement - Is it still important?
pazguille
0
81
Other Decks in Programming
See All in Programming
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.3k
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
210
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
910
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
PostmanでAPIの動作確認が楽になった話
h455h1
0
180
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
Milestoner
bkuhlmann
1
410
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
390
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
980
Netty Chicago Java User Group 2024-04-17
sullis
0
200
AppRouter Panel Talk
yosuke_furukawa
PRO
1
470
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.5k
Featured
See All Featured
Fireside Chat
paigeccino
22
2.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
The Cult of Friendly URLs
andyhume
74
5.7k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Agile that works and the tools we love
rasmusluckow
325
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Web Components: a chance to create the future
zenorocha
306
41k
The Invisible Side of Design
smashingmag
294
49k
Statistics for Hackers
jakevdp
790
220k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
A Modern Web Designer's Workflow
chriscoyier
689
190k
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!