Are Data URIs better than CSS Sprites? @pazguille & @taly
Data URIThe myths
View Slide
Base64
http://tools.ietf.org/html/rfc3548Encoding data (files)in plain text
Data URIsUniform Resource Identifier
A way to include data in a web page
Syntax
● data - name of the scheme
● data - name of the scheme○ image/png - content type
● data - name of the scheme○ image/png - content type● base64 - type of encoding used to encode
● 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 filesinside of others files(CSS, JS, images in-lined in the HTML)
Performance enhancement.
Sure?
Data URIhttp://www.webpagetest.org/result/131227_FM_JD4/1/details/
Spriteshttp://www.webpagetest.org/result/131227_WR_JDT/1/details/
SpritesData URI
It Sucks!
Increase the size of your HTMLdocument or CSS file.SpritesData URI
Make the files themselves larger.
Are not separately cached from theircontaining document
IE8 limits data URIs toa maximum length of 32 KB.
It’s a pain to maintain
Bad User Experience:100ms interactivity budget.
Recap
Are not always the best solution
Use on very small resources
Thank you!
pazguille
mot_techtalk
coe401_
mozu1206
hollycummins
yosuke_furukawa
hitokun
kishida
kokuyouwind
koic
ivargrimstad
rinchsan
doggy
chrislema
erikaheidi
pauljervisheath
hatefulcrawdad
maggiecrowley
tanoku
paulrobertlloyd
trallard
jacobian
marcduiker
hursman
skipperchong