Converting to Data URI

The data URI scheme is a uniform resource identifier (URI) scheme that provides a way to include data in-line in web pages as if they were external resources. This technique allows normally separate elements such as images and style sheets to be fetched in a single HTTP request, which may be more efficient than multiple HTTP requests.

You can use some web-service like http://dataurl.net to convert the data to the DataURI scheme. This is ok but an Internet connection is needed, and when you are without network access you can't use the tool.

The best way is do it locally. Luckily for OS X and Linux there is a cli tool that can convert data in with single a command. That tool is called datauri-cli.

Install it by issuing a:

npm install -g datauri-cli

Converting Images

datauri image.jpg

The command above will output the image as datauri to stdout. If you want to copy directly into the clipboard use this instead:

datauri image.jpg --copy

Converting to CSS

datauri image.jpg --css

The command above will output the image as datauri to stdout as CSS. You can also copy it using:

datauri image.jpg --css --copy

Another option is to create/update .css files directly. Can be done with:

datauri image.jpg --css=style.css

Finally it is possible to define the class to dump the data scheme in or specify parameters such as width or height, like this:

datauri image.jpg --css --class=MyNewClass

datauri image.jpg --css --width --height

datauri image.jpg --css --background-size

The program's project is hosted by Github, here: https://github.com/data-uri/datauri

Output Examples

Image to DataURI

 mach7 [~/Desktop] $ datauri Image.jpg

data:image.jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAMAAAAC2
hU0AAAAUVBMVEUUFy4JDygbK0YTIDENFSwNGioYKUQSIUMNHj8cLTwZKjkWHjcf
IjUOFzIWHTESGjENFCgUFSYDESEHCyEZI0IkKT4aJT4VIDoHGzYRHTAIFyUw0/Z
sAAAAO0lEQVQI1wXBhQHAMAzAMKfMOP7/0Em0JdXMwrlNzRsKiHRhGsjqYIzWr+
Cw9tW393w6RhUUNumVHvcDRggCLgiLXdgAAAAASUVORK5CYII=

 mach7 [~/Desktop] $ 

Image to DataURI CSS

 mach7 [~/Desktop] $ datauri Image.jpg --css

.Image {
background-image: url('data:image.jpg;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAcAAAAICAMAAAAC2hU0AAAAUVBMVEUUFy4JDygbK0YTIDENF
SwNGioYKUQSIUMNHj8cLTwZKjkWHjcfIjUOFzIWHTESGjENFCgUFSYDESEH
CyEZI0IkKT4aJT4VIDoHGzYRHTAIFyUw0/ZsAAAAO0lEQVQI1wXBhQHAMAz
AMKfMOP7/0Em0JdXMwrlNzRsKiHRhGsjqYIzWr+Cw9tW393w6RhUUNumVHv
cDRggCLgiLXdgAAAAASUVORK5CYII=');
}

 mach7 [~/Desktop] $ 

Getting Help

 mach7 [~/Desktop] $ datauri -h

Data-uri usage:

datauri <target_file>
datauri <target_file> --css
datauri <target_file> --copy
datauri <target_file> --css --copy
datauri <target_file> --css=<css_output>
datauri <target_file> --css=<css_output> --class=<css_class_name>
datauri <target_file> --css=<css_output> --class=<css_class_name> --width --height
datauri <target_file> --css=<css_output> --class=<css_class_name> --background-size

 mach7 [~/Desktop] $