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
 <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4yMfEgaZUAAAAfSURBVDhPY/j+v49sNKqZRDSqmUQ0qplENPI0/+8DAOnW7m6FxOUUAAAAAElFTkSuQmCC' />
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.