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
tomokusaba
prof18
mackey0225
mipypf
niftycorp
faithandbrave
mot_techtalk
yonetty
fadis
parttimenerd
geoffreycrofte
myddelton
shpigford
dotmariusz
holman
reverentgeek
akmur
aarron
cromwellryan
jensimmons
shlominoach
jasonvnalue