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
420
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
230
No me robes el Scroll!
pazguille
0
230
User First
pazguille
1
190
#OfflineFirst
pazguille
3
5.9k
ES6 in Production
pazguille
10
3.1k
No me hagas esperar!
pazguille
1
150
Hello, Style Guides!
pazguille
0
250
Decoupling your JavaScript
pazguille
0
170
Progressive Enhancement - Is it still important?
pazguille
0
110
Other Decks in Programming
See All in Programming
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
200
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
150
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
430
AIでLINEスタンプを作ってみた
eycjur
1
230
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Laravel Boost 超入門
fire_arlo
3
210
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
速いWebフレームワークを作る
yusukebe
5
1.7k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
170
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
850
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
How to train your dragon (web standard)
notwaldorf
96
6.2k
For a Future-Friendly Web
brad_frost
180
9.9k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Gamification - CAS2011
davidbonilla
81
5.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Designing for Performance
lara
610
69k
Fireside Chat
paigeccino
39
3.6k
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!