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
380
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
160
#OfflineFirst
pazguille
3
5.8k
ES6 in Production
pazguille
10
2.9k
No me hagas esperar!
pazguille
1
120
Hello, Style Guides!
pazguille
0
210
Decoupling your JavaScript
pazguille
0
140
Progressive Enhancement - Is it still important?
pazguille
0
90
Other Decks in Programming
See All in Programming
Prompt Engineering for Developers @ AWS Community Day Adria 2024
slobodan
0
100
cgroup v2 support in Kubeadm
kentatada
0
210
CSC509 Lecture 07
javiergs
PRO
0
130
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
130
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
410
Modern Functional Fluent CFML REST by Luis Majano
ortus24
0
160
書籍『LangChainとLangGraphによるRAG・AIエージェント[実践]入門』の紹介
os1ma
2
120
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
680
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1.5k
デバッグの話 / Debugging for Beginners
kaityo256
PRO
8
730
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
660
Програмиране с Rust, ФМИ, 2024
nikolads
0
120
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Scaling GitHub
holman
458
140k
For a Future-Friendly Web
brad_frost
174
9.4k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Facilitating Awesome Meetings
lara
49
6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Gamification - CAS2011
davidbonilla
80
5k
Side Projects
sachag
452
42k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
46
4.9k
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!