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 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:

Output Examples

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


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

.Image {
background-image: url('data:image.jpg;base64,iVBORw0KGgoAAA

 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] $  
{{ message }}

{{ 'Comments are closed.' | trans }}