Base64 Data URLs Explained (And How to Build One)
A data URL is a way to embed a file directly inside a web page, a stylesheet or an email — no separate request needed. The image bytes are encoded as Base64 and transported in the src attribute itself.
The anatomy of a data URL
A data URL follows the form data:<media type>;base64,<data>. For a PNG it reads data:image/png;base64,iVBORw0KGgo... The prefix tells the browser two things: what kind of data it is (its MIME type) and that it is Base64-encoded. The browser decodes and renders it exactly like a fetched file.
Why browsers accept them natively
Browsers ship a built-in decoder for data URLs, so an image embedded this way works everywhere an <img> tag works — no plugin, no extra round trip. The same applies in CSS with background-image and url(), and in email to embed images without attachments.
The core trade-off: no request, but more bytes
Because Base64 adds roughly 33%, a data URL is about a third larger than the original file, and it counts toward the size of your HTML or CSS. For small, reusable assets — icons, logos, tiny previews — this is a fair price. For photos and multi-megabyte files it is wasteful.
When to use them
Use data URLs for a handful of small assets that must render instantly or travel in a single file: email signatures, single-file tools, offline demos, or favicons. For large or numerous images, the browser’s cache of real files wins.
Creating and decoding them
The Image to Base64 tool builds a ready-to-paste data URL from any PNG, JPG, WebP, GIF, BMP or AVIF file, and the Base64 to Image tool does the reverse, detecting the format and handing back the original file. Both run in your browser, so nothing is uploaded.