Improve page speed with data URLs and sass - part 2

Samples of data URLs

Sample 1 – text/plain

Data URLs - text/plain example
 <div><a href="data:,I am text file" download="a1.txt">Download text file 1</a> </div>
 <div><a href="data:text/plain,I am text file" download="a2.txt">Download text file 2</a> </div>

The above data URLs has equal semantics – when we click in the above links, the browser will download a text file with the contents I am text file.

Sample 2 – text/csv

We can set text mime type. In the following example we will embed CSV file.

Data URLs - text/csv example
 <div><a href="data:text/csv,col1,col2%0A1,2%0A3,4" download="a1.csv">Download CSV file</a></div>
When we click in the above link, the browser will download CSV file. Please, note how we use the URL encode to decode the newline character with %0A

Sample 3 – text/html

let's see how can we embed HTML in iframe

Data URLs - text/html example
 <iframe style='width:100%; height: 100px;background:#dddddd' src='data:text/html,<!DOCTYPE html><html><head></head><body><h1>Hello</h1><p>I am HTML</p></body></html>'></iframe>

Sample 4 – text/xml

let's see how can we embed xml.

Data URLs – text/xml example
 <div><a href='data:text/xml,<?xml version="1.0"?><note>I am an XML</note>' download='a1.xml'>Download xml</a></div>

Sample 5 – image/png

Not all mediatypes are text. lets see how we can embed binary image files:

Data URL in base64 encoding
Note that the base64 is used and the data is encoded in base64.

In the next part we will see how can we embed images in CSS stylesheet.