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
430
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
240
User First
pazguille
1
190
#OfflineFirst
pazguille
3
5.9k
ES6 in Production
pazguille
10
3.1k
No me hagas esperar!
pazguille
1
160
Hello, Style Guides!
pazguille
0
260
Decoupling your JavaScript
pazguille
0
170
Progressive Enhancement - Is it still important?
pazguille
0
120
Other Decks in Programming
See All in Programming
All About Angular's New Signal Forms
manfredsteyer
PRO
0
150
XP, Testing and ninja testing ZOZ5
m_seki
3
650
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
910
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.3k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
580
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
220
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
4.1k
Serena MCPのすすめ
wadakatu
4
1k
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
390
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
Bash Introduction
62gerente
615
210k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Statistics for Hackers
jakevdp
799
220k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
The World Runs on Bad Software
bkeepers
PRO
72
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Being A Developer After 40
akosma
91
590k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The Invisible Side of Design
smashingmag
302
51k
How to train your dragon (web standard)
notwaldorf
97
6.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
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!