CSS Sprites vs. Data URIs

Are Data URIs better than CSS Sprites?
@pazguille & @taly

1. Data URI The myths
2. Base64
3. http://tools.ietf.org/html/rfc3548 Encoding data (files) in plain text
4. Data URIs Uniform Resource Identifier
5. A way to include data in a web page
6. Syntax
7. <img src=“data:image/png;base64,IVBOR...”>
8. <img src=“data:image/png;base64,IVBOR...”> • data - name of the scheme
9. <img src=“data:image/png;base64,IVBOR...”> • data - name of the scheme ◦ image/png - content type
10. <img src=“data:image/png;base64,IVBOR...”> • data - name of the scheme ◦ image/png - content type • base64 - type of encoding used to encode
11. <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
12. Why it rocks
13. Reduce the number of HTTP requests.
14. The ability to embed files inside of others files (CSS, JS, images in-lined in the HTML)
15. Performance enhancement.
16. Sure?
19. Data URI http://www.webpagetest.org/result/131227_FM_JD4/1/details/
20. Data URI http://www.webpagetest.org/result/131227_FM_JD4/1/details/
21. Data URI http://www.webpagetest.org/result/131227_FM_JD4/1/details/
22. Sprites http://www.webpagetest.org/result/131227_WR_JDT/1/details/
23. Sprites http://www.webpagetest.org/result/131227_WR_JDT/1/details/
24. Sprites http://www.webpagetest.org/result/131227_WR_JDT/1/details/
25. Sprites Data URI
26. It Sucks!
27. Increase the size of your HTML document or CSS file. Sprites Data URI
28. Make the files themselves larger.
29. Are not separately cached from their containing document
30. IE8 limits data URIs to a maximum length of 32 KB.
31. It’s a pain to maintain
32. Bad User Experience: 100ms interactivity budget.
36. Recap
37. Are not always the best solution
38. Use on very small resources
39. Thank you!