Pro Yearly is on sale from $80 to $50! »

CSS Sprites vs. Data URIs

F8a70e01eddbadc5e4f9876ff34494fa?s=47 Guille Paz
January 10, 2014

CSS Sprites vs. Data URIs

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

F8a70e01eddbadc5e4f9876ff34494fa?s=128

Guille Paz

January 10, 2014
Tweet

Transcript

  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?

  17. None
  18. None
  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.

  33. None
  34. None
  35. None
  36. Recap

  37. Are not always the best solution

  38. Use on very small resources

  39. Thank you!