What is a Data URI?

A Data URI is a URI that starts with the “data” scheme and allows you to easily embed all kinds of objects within your web page.

Much like Blob URIs, Data URIs have been around for awhile and are supported on all of the major browsers. A Data URI is a formatted string with the following pattern:

data:[media type][;base64],[data]

The “media type” parameter is optional, but is always a good idea to include it. Usually you’ll see it start with the mime-type of the encoded data. The default mime-type, if it isn’t specified, is “text/plain”.

The “base64” parameter is also optional. If present, it indicates the data that follows is base64 encoded data.

Finally, the “data” parameter is the exactly that. The data you want to render.

Example of a Data URI

A data URI could be as simple as this:

data:,Hello World!

or, more likely, you’ll see something like this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QkeCyss5OdeMQAABRxJREFUWMPtl3lsFFUYwH9vZmd3Zq92t9Bu6RYKbUVo5FKglEMOOQVUkGAiYGKMoonGxCAxEDRqgoRASFBAIvEIpkIAEVIMAQFRNEBAwHIUikBZkIa7m9LdmdkZ/ygUF2i75Qgx8Ute8uYd3/fLvO94T9ACWbZigyctEKyRZUWEcsJg20nzWT6J87WCE5VHdhkxvd/k8UPM5nQKWigDBw2VFy5fZ8ZjdXi8/oZxlwN0E86dPc3A7u1T1iu1FGDsxJecejyOYehJ4w5JgABd11ukr8UA2NxXkXjI8j/Afw9ACPFwAULhtqqmuVE1T9J4zLSRBASCGcz4aJ76wAC8Pt/xvyor0DR30njCgvZBGV96kKKuPcc8EIDS9dtLOhZ1CaSlB7Ht2xNCddRCwiKnXd7KAf2GyKnolFM1PnLU89LQMc+eMqpPUJTfDs3W8QgzqQnDICfDhepNIyuvcO+qb5dVNKfXkSrApNffnODObEOfUgFVjR/xmj4GM7/fx6IBrdemUmtSOoIXXnzVmZ9f8N3Qb/ajFeajKTTaxu1wsHZSZ+xAG1Zs2DHqvgCMn/LyW6cNxa5VfWA1vVZzCaJCZXrZYUKZrcvuGWDajNn+vPb5cyesOia03I4pHdfgLbB4XCF1vjaUlv06/J4A+j81Yta2s3VIXh+2Q0maM2suYVw4g23qSVERk2Sygn5mbawgHMpcf9cAH8z5LDMrt+070zZFcGblJpVis+YSRvVJzMvVxE6UJ2VICXhuq8GHw9pyUQ0py9f9POKuAEr6Pzn3ywPnkfxuhD89+Vqg1yV/W8nOsTuqUJzfivc3H6V9OHtNiwE+Wfh1B61VaMqSfTXIviAkbonf9EyQ6rfLviBCSlbllmH2foOpxTlEHJnaV6s3Pd0igJKS4kUfb69CqDJKdu7tRcmhIFVfQNECSHrijhenOYcUpvYKMfOnYzzaIa80ZYD5n5d2rXWlDd94FmRPGnYjd1sregW7Nop19dId590aLD1m8srj2Rwjw7e0tGx0SgD9insumb4lApKJktMhlRrd6PXxtV2Cd/vnMGtLJT2KOi1sFmDBFyv6nkx4ig/USMgeP9jJym3bxtbjxHduBZeKnBUmceYk+p+77wihumQ2RhJM7pbNIcOTt2DZykFNvgt2Hjy1+o1tF8ftuWyiFXQDWWkwbF78G6FqGLt+QenYFavmMomqSpQuvUlUR5D8AUjzI2RHvZNeF6ed4MoEmd6L/uDTgRlrehW1G99oMfIqjsF7zuhI6W5QlIbUGz9Zjm0aAChP9MX4fStyKIyz9yD0vTuQA62wVAfWpXP1wIaO0joMwFVbpvyyRTu/G68iD26yGhpmwo8kIxQ1KfHcMA5gXYuiDhyNcNVXRW3wWOy6a8QiR26uiV+7+WqS4HiNhVd1oCcsf5M+IJxKRciXwDJiCPmWuL/RD2Q2GG/Yp7lxZLS5ueZf/bgJnQMy1/Q6JIdS0STAwcOVi+cPK8COmeiRE4jr/0hpHUbN74ZW2APJ5b6jwynBEGpB/RpZ8wJQF4N5XQxOX4wy/JFsyo9ULm72cbp558FD5XFfp7c3R8ChQEYIoXoQLg2hOBGKhG3Vx5mwwbSp95U4pHksOnhsCvyC7unwXpHEZzuqiFsyXZxXDw8tLuqc0ut45Y+/zXmssO0zuyPR/GjcclwPhXqrloXkdIHThS1JBCSLXA+EvRK6BbEEmLbAjOvsqY6bAwrSj5cfPfXDxJEl02+18w8hWMOkl9o05QAAAABJRU5ErkJggg==

If you render the example above as an image inside of a webpage, you’d see this:

If you’d like to easily play around with Data URIs and are using FireFox or Chrome, you can enter it in your URL bar to render it. Try it now: data:,Hello world!.

How do I create a base64 encoded string?

The easiest way is to use an online converter. You can google for “base64 encoder” and choose from one of the many websites. Alternatively, if you want to generate the strings via the command-line, you could use OpenSSL to do the conversion for you. You just need to type the following:

openssl base64 -A -in <input file you want to convert to base64>

This will output a base64 string, so you’ll need to embed it into a Data URI in order for it to work.

When should I use a Data URI?

I haven’t used Data URIs much myself, but typically I’d consider using them if I have lots of small images (less than 32×32 pixels) or images that are frequently used. A good example could be to swap out the bullet within a bulleted list.

A recent scenario where it came in handy was when I had to upload a common HTML page to both Google Drive and One Drive and render an image in both. It seemed that no matter which method I used to render a simple square, the only one that worked was by using an embedded data URI.

When should I NOT use a Data URI?

If size is important to you, then you won’t want to use Base64-encoded Data URIs. The reason is that base64 encoding anything will result in a larger output. Typically, it’s about 30% larger. If you use a lot of Data URIs it could also potentially slow the initial page load while the browser decodes any base64 data and generates the appropriate artifact.

Can I use Data URIs for other stuff?

Absolutely! If you can include it on a webpage, you can include it as a Data URI! However, some browsers, such as IE do have limitations on what can be included as a Data URI. For instance, you cannot include HTML as a Data URI in IE.

Closing

What are your thoughts? How do you use Data URIs? Are there any further advantages or disadvantages you can think of?

I hope you found this article informative and useful. Please share it if you learned something. If you have any questions or feedback on what you’d like to see in the future, please leave those below!