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
200
Decoupling your JavaScript
pazguille
0
140
Progressive Enhancement - Is it still important?
pazguille
0
90
Other Decks in Programming
See All in Programming
私のEbitengineの第一歩
qt_luigi
0
450
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
130
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
680
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
230
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1.1k
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
290
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
400
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
LangChainの現在とv0.3にむけて
os1ma
4
940
実践!難読化ガイド
mitchan
0
240
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Practical Orchestrator
shlominoach
185
10k
How to Think Like a Performance Engineer
csswizardry
16
960
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Atom: Resistance is Futile
akmur
261
25k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Design by the Numbers
sachag
277
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
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!