What Is a Data URL?
A data URL is a URI scheme that embeds file content directly in a URL string rather than linking to an external resource. The format is:
data:[<mediatype>][;base64],<data>
For a PNG image:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
The browser treats this exactly like an external image URL — it decodes the Base64 data and renders the image. No HTTP request is made.
How Image-to-Base64 Conversion Works
- Read the image file as binary data
- Encode the binary data using Base64 encoding (see the Base64 Encoding guide)
- Prefix with the data URL scheme:
data:image/png;base64,
The MIME type in the prefix tells the browser how to interpret the data: image/png, image/jpeg, image/svg+xml, image/webp, etc.
When to Use Data URLs
Small icons and UI elements. Embedding a 200-byte SVG icon directly in CSS eliminates an HTTP request that would itself have overhead larger than the icon.
Email HTML. Email clients cannot load external images from most servers (they block them by default or require user opt-in). Embedding images as Base64 in the HTML email body ensures they display immediately.
Standalone HTML files. When creating a single .html file that needs to include images without external dependencies — documentation, offline tools, reports — data URLs make the file self-contained.
CSS backgrounds. Small, reusable background patterns or gradients embedded in CSS can reduce HTTP requests.
Canvas and WebGL. Some canvas operations (like drawImage) can use data URLs directly without needing an <img> element or external URL.
When NOT to Use Data URLs
Large images. Base64 increases file size by ~33%. A 100KB image becomes ~133KB as Base64. More importantly, the browser cannot cache the image separately — every page load or CSS re-parse processes the Base64 string again.
Images used on multiple pages. If the same image appears on many pages, an external URL with a CDN and long cache headers is far more efficient. The browser downloads it once and reuses the cached copy. A Base64-embedded image is re-downloaded (re-parsed, actually) with every page.
Images needed for lazy loading. Data URLs are loaded immediately as part of the document — you cannot lazy-load them.
SEO-sensitive images. Google's image search indexes external image URLs. Data URL images do not appear in image search.
Size Limits
Browsers set limits on data URL length. Chrome allows up to ~2MB. Attempting to embed larger images may cause silent failures or performance degradation.
Converting in Different Environments
Node.js:
import fs from 'node:fs';
const data = fs.readFileSync('image.png');
const base64 = data.toString('base64');
const dataUrl = `data:image/png;base64,${base64}`;
Browser (FileReader API):
const reader = new FileReader();
reader.onload = (e) => console.log(e.target.result); // data URL
reader.readAsDataURL(file); // where file is a File object
Try It
The Image to Base64 tool on Syntaxly converts any image file to a data URL in the browser. Drag and drop or click to upload — no file is sent to a server.