Images with data URI scheme using Node.js

In this post, I am sharing how to embed an image data directly into the document with data URI scheme in Node.js and Jade. The data URL scheme specification is RFC 2397. This process will basically require conversion of an image into Base64 format.

The following image is an example of the below small red dot image embedded in HTML.


And its content in data URI scheme.

  alt="Red dot"

The data URI scheme format is as follows: data:[<MIME-type>][;charset=<encoding>][;base64],<data>

Images represented in data URI scheme are long strings encoded in the base64 format which are interpreted by a browser as a type of a file we are saying it is (<MIME-type>).

Node.js and Jade Example

I am going to use default express web application framework with Jade template engine.

To install express run the following commands: npm install express.

To generate the default express application, you can use a command provided by the express module: node node_modules/.bin/express.

Terminal output would be like:

Terminal output
Terminal output

Note that you will also need to install all required modules which were added to package.json file during the application creation. You can do that by calling: npm install.

I will add a few modifications:

  • Embed image using data URI scheme into the index Jade template (note that Jade code does not look like HTML markup)
  • Add code converting an image in base64 format to a request handler method.

I am going to use Wikipedia Logo image as an embed image:

Wikipedia logo
Wikipedia logo

Jade template used for rendering is as follows:

extends layout

block content
  h1= title
  p Welcome to #{title}
  img(alt='Wikipedia', src='data:img/png;base64,#{src}')

Note that the layout page generated by express does not need any modifications.

The request handler method look like:

var fs = require('fs'),
  path = require('path')

exports.index = function (req, res) {
  fs.readFile(path.join(__dirname, '../wikipedia.png'), function (err, data) {
    res.render('index', {
      title: 'Express',
      src: data.toString('base64'),

In order to use power of Node.js I used asynchronous function (fs.readFile() ) to read the file content. Once the file data is ready, index template will be rendered, and the image source converted in Base64 format is passed as a parameter.

Rendered page looks like:

wikipedia with data URI
wikipedia with data URI


In this post, I just wanted to focus on an easy way of converting an image into Base64 format and then embedding the image data directly into the document with data URI scheme .

One of the main advantages of this approach is to save HTTP requests to improve page load time. However, the mechanism has also its disadvantages.

The decision whether this approach will be of any use in your project is a different matter. I would recommend going through Malware and phishing as well as Common problems sections before you make any decisions.

Happy coding!