CSS Sprites vs. Data URIs

Transcript

1. 1.

   Data URI The myths

2. 2.

   Base64

3. 3.

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

4. 4.

   Data URIs Uniform Resource Identifier

5. 5.

   A way to include data in a web page

6. 6.

   Syntax

7. 7.

   <img src=“data:image/png;base64,IVBOR...”>

8. 8.

   <img src=“data:image/png;base64,IVBOR...”> • data - name of the scheme

9. 9.

   <img src=“data:image/png;base64,IVBOR...”> • data - name of the scheme ◦

   image/png - content type
10. 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. 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. 12.

    Why it rocks

13. 13.

    Reduce the number of HTTP requests.

14. 14.

    The ability to embed files inside of others files (CSS,

    JS, images in-lined in the HTML)
15. 15.

    Performance enhancement.

16. 16.

    Sure?

17. 17.

    None
18. 18.

    None
19. 19.

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

20. 20.

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

21. 21.

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

22. 22.

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

23. 23.

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

24. 24.

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

25. 25.

    Sprites Data URI

26. 26.

    It Sucks!

27. 27.

    Increase the size of your HTML document or CSS file.

    Sprites Data URI
28. 28.

    Make the files themselves larger.

29. 29.

    Are not separately cached from their containing document

30. 30.

    IE8 limits data URIs to a maximum length of 32

    KB.
31. 31.

    It’s a pain to maintain

32. 32.

    Bad User Experience: 100ms interactivity budget.

33. 33.

    None
34. 34.

    None
35. 35.

    None
36. 36.

    Recap

37. 37.

    Are not always the best solution

38. 38.

    Use on very small resources

39. 39.

    Thank you!