Introduction
A Data URL is a URI scheme that provides a way to inline data in an HTML document.
Say you want to embed a small image. You could go the usual way, upload it to a folder and use the img
tag to make the browser reference it from the network:
<img src="image.png" />
or you can encode it in a special format, called Data URL, which makes it possible to embed the image directly in the HTML document, so the browser does not have to make a separate request to get it.
Data URLs might save some time for small files, but for bigger files there are downsides in the increased HTML file size, and they are especially a problem if the image reloads on all your pages, as you can’t take advantage of the browser caching capabilities.
Also, an image encoded as Data URL is generally a bit bigger than the same image in binary format.
They aren’t much practical if your images are frequently edited, since every time the image is changed, it must be encoded again.
That said, they have their place on the Web Platform.
How does a Data URL look
A Data URL is a string that starts with data:
followed by the MIME type format. For example a PNG image has mime type image/png
.
This is followed by a comma and then by the actual data.
Text is usually transferred in plain text, while binary data is usually base64 encoded.
Here is an example of how such Data URL will look like:
<img src="data:image/png,%89PNG%0D%0A..." />
And here is a small version of the banner image of this article encoded in a link
Here is how a base64 encoded Data URL looks like. Notice it starts with data:image/png;base64
:
<img src="data:image/png;base64,iVBORw0KGgoAA..." />
And here is a small version of the banner image of this article base64 encoded in a link.
This site has a very nice Data URL generator: https://dopiaza.org/tools/datauri/index.php which you can use to transform any image sitting in your desktop to a Data URL.
Data URLs can be used anywhere a URL can be used, as you saw you can use it for links, but it’s also common to use them in CSS:
.main {
background-image url('data:image/png;base64,iVBORw0KGgoAA...');
}
Browser support
They are supported in all modern browsers.
Security
Data URLs can encode any kind of information, not just images, and so they come with their set of security implications.
From Wikipedia:
The data URI can be utilized to construct attack pages that attempt to obtain usernames and passwords from unsuspecting web users. It can also be used to get around cross-site scripting (XSS) restrictions, embedding the attack payload fully inside the address bar, and hosted via URL shortening services rather than needing a full website that is controlled by a third party.
Check this article from the Mozilla Firefox Blog for more information on how Data URLs can be used by malicious users to do bad things, and how the Firefox browser mitigates such risks.
Data URLs are defined in RFC 2397.
Download my free JavaScript Beginner's Handbook
More browser tutorials:
- Some useful tricks available in HTML5
- How I made a CMS-based website work offline
- The Complete Guide to Progressive Web Apps
- The Fetch API
- The Push API Guide
- The Channel Messaging API
- Service Workers Tutorial
- The Cache API Guide
- The Notification API Guide
- Dive into IndexedDB
- The Selectors API: querySelector and querySelectorAll
- Efficiently load JavaScript with defer and async
- The Document Object Model (DOM)
- The Web Storage API: local storage and session storage
- Learn how HTTP Cookies work
- The History API
- The WebP Image Format
- XMLHttpRequest (XHR)
- An in-depth SVG tutorial
- What are Data URLs
- Roadmap to learn the Web Platform
- CORS, Cross-Origin Resource Sharing
- Web Workers
- The requestAnimationFrame() guide
- What is the Doctype
- Working with the DevTools Console and the Console API
- The Speech Synthesis API
- How to wait for the DOM ready event in plain JavaScript
- How to add a class to a DOM element
- How to loop over DOM elements from querySelectorAll
- How to remove a class from a DOM element
- How to check if a DOM element has a class
- How to change a DOM node value
- How to add a click event to a list of DOM elements returned from querySelectorAll
- WebRTC, the Real Time Web API
- How to get the scroll position of an element in JavaScript
- How to replace a DOM element
- How to only accept images in an input file field
- Why use a preview version of a browser?
- The Blob Object
- The File Object
- The FileReader Object
- The FileList Object
- ArrayBuffer
- ArrayBufferView
- The URL Object
- Typed Arrays
- The DataView Object
- The BroadcastChannel API
- The Streams API
- The FormData Object
- The Navigator Object
- How to use the Geolocation API
- How to use getUserMedia()
- How to use the Drag and Drop API
- How to work with scrolling on Web Pages
- Handling forms in JavaScript
- Keyboard events
- Mouse events
- Touch events
- How to remove all children from a DOM element
- How to create an HTML attribute using vanilla Javascript
- How to check if a checkbox is checked using JavaScript?
- How to copy to the clipboard using JavaScript
- How to disable a button using JavaScript
- How to make a page editable in the browser
- How to get query string values in JavaScript with URLSearchParams
- How to remove all CSS from a page at once
- How to use insertAdjacentHTML
- Safari, warn before quitting
- How to add an image to the DOM using JavaScript
- How to reset a form
- How to use Google Fonts