Data URIs: embedding files in HTML and CSS

A data URI is a link that contains the file itself. Instead of src="logo.png" you write src="data:image/png;base64,iVBORw0..." and the browser has the image without downloading anything.

The syntax

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

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...%3E
data:text/plain;charset=utf-8,Hello%20world
data:application/pdf;base64,JVBERi0xLjQK...

The media type tells the browser what the data is; ;base64 says the data is Base64 (otherwise it is URL-encoded text). Make one from any image with Image to Base64 or from any file with File to Base64.

In HTML, CSS and Markdown

<img src="data:image/png;base64,iVBORw0..." width="32" height="32" alt="Logo">

.icon { background-image: url("data:image/svg+xml;base64,PHN2Zy..."); }

![Logo](data:image/png;base64,iVBORw0...)

When data URIs make pages faster - and when slower

Good idea	Bad idea
Tiny icons and logos (under ~5-10 KB) HTML e-mails (no external images to block) Single-file HTML reports and offline pages Images generated by code (charts, QR codes)	Photos and large images: +33% size, no separate caching Images used on many pages (cached once as a file) Anything above the fold that blocks rendering of a big CSS file Content that changes often

With HTTP/2 and HTTP/3, many small files are cheap to download, so the old advice "inline everything" no longer holds. Inline only what is small and used once.

SVG without Base64

SVG is text, so in CSS you can skip Base64 and URL-encode it instead - it is usually shorter and still readable. Our image tool offers this output as SVG URL-encoded. Replace double quotes with single quotes and encode #, <, > and %.

Limits and security

Modern browsers accept data URIs of many megabytes, but very long ones slow down HTML and CSS parsing.
For security, browsers block navigating the top window to a data: URL. Use them for images, fonts and downloads, not for pages.
A Content-Security-Policy must allow data: for img-src (or font-src) when you use them.

Turn it back into a file

Paste any data URI into Base64 to Image or Base64 to File to preview and download it.