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