Data URIs Explained: When to Use Base64 Images
You've probably seen a giant string like data:image/png;base64,iVBORw0KGgo… in someone's CSS and wondered what it was. That's a data URI — an image embedded directly in text instead of loaded from a file. Here's how it works and when it's actually worth using.
What Base64 and data URIs are
Computers store images as binary. Base64 is a way to represent that binary data using only plain text characters, so it can be pasted into an HTML or CSS file. A data URI wraps that text with a small prefix describing the file type:
data:— this is inline data, not a URL.image/png— the MIME type.;base64,— how the data is encoded.- the long string — the image itself, as text.
You can generate one from any image with our image to Base64 tool, which also gives you ready-to-paste <img> and CSS background-image snippets.
The upside: fewer requests
Normally each image is a separate download the browser has to request. Inlining a tiny image as a data URI folds it into a file the browser already has, removing that extra round-trip. For small, frequently used assets — icons, a 1px gradient, a small logo — this can shave loading time.
The downside: size and caching
Base64 text is about 33% larger than the original binary. Worse, an inlined image can't be cached on its own — it's re-downloaded every time the HTML or CSS around it changes, and it can't be shared across pages. Inline a large photo and you bloat every page that includes that stylesheet.
The simple rule
- Inline it if the image is tiny (a few KB), used site-wide, and rarely changes.
- Keep it a file for anything larger — especially photos.
For photos, don't reach for Base64 at all: keep them as real image files and compress them, choosing the right format with JPEG vs PNG vs WebP. Need to go the other way and turn a Base64 string back into a file? The same converter decodes it for you.