Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Sprites vs. Data URIs

Guille Paz
January 10, 2014

CSS Sprites vs. Data URIs

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

Guille Paz

January 10, 2014
Tweet

More Decks by Guille Paz

Other Decks in Programming

Transcript

  1. Data URI
    The myths

    View Slide

  2. Base64

    View Slide

  3. http://tools.ietf.org/html/rfc3548
    Encoding data (files)
    in plain text

    View Slide

  4. Data URIs
    Uniform Resource Identifier

    View Slide

  5. A way to include data in a web page

    View Slide

  6. Syntax

    View Slide


  7. View Slide


  8. ● data - name of the scheme

    View Slide


  9. ● data - name of the scheme
    ○ image/png - content type

    View Slide


  10. ● data - name of the scheme
    ○ image/png - content type
    ● base64 - type of encoding used to encode

    View Slide


  11. ● data - name of the scheme
    ○ image/png - content type
    ● base64 - type of encoding used to encode
    ● IVBOR… - the encoded data

    View Slide

  12. Why it rocks

    View Slide

  13. Reduce the number of HTTP requests.

    View Slide

  14. The ability to embed files
    inside of others files
    (CSS, JS, images in-lined in the HTML)

    View Slide

  15. Performance enhancement.

    View Slide

  16. Sure?

    View Slide

  17. View Slide

  18. View Slide

  19. Data URI
    http://www.webpagetest.org/result/131227_FM_JD4/1/details/

    View Slide

  20. Data URI
    http://www.webpagetest.org/result/131227_FM_JD4/1/details/

    View Slide

  21. Data URI
    http://www.webpagetest.org/result/131227_FM_JD4/1/details/

    View Slide

  22. Sprites
    http://www.webpagetest.org/result/131227_WR_JDT/1/details/

    View Slide

  23. Sprites
    http://www.webpagetest.org/result/131227_WR_JDT/1/details/

    View Slide

  24. Sprites
    http://www.webpagetest.org/result/131227_WR_JDT/1/details/

    View Slide

  25. Sprites
    Data URI

    View Slide

  26. It Sucks!

    View Slide

  27. Increase the size of your HTML
    document or CSS file.
    Sprites
    Data URI

    View Slide

  28. Make the files themselves larger.

    View Slide

  29. Are not separately cached from their
    containing document

    View Slide

  30. IE8 limits data URIs to
    a maximum length of 32 KB.

    View Slide

  31. It’s a pain to maintain

    View Slide

  32. Bad User Experience:
    100ms interactivity budget.

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. Recap

    View Slide

  37. Are not always the best solution

    View Slide

  38. Use on very small resources

    View Slide

  39. Thank you!

    View Slide