Data URIs let you embed an image directly in HTML, CSS, or JS — eliminating the HTTP round-trip. Great for tiny above-the-fold icons and CSS backgrounds where request overhead exceeds the image size. This tool encodes any raster or SVG image to a base64 data URI, generates ready-to-paste snippets for HTML/CSS/JS, and warns when the result exceeds the recommended inline size threshold.
When to inline vs. ship separate
Inline data URIs eliminate the HTTP request, so they're a win for tiny images (under 2 KB) where the request overhead exceeds the file size. Above 4 KB, inlining hurts more than it helps — the image can't be cached separately and inflates every HTML/CSS bundle. The tool warns when your output is above the recommended threshold.
Three snippet formats
Every conversion produces: HTML (<img src="data:image/…">), CSS (background-image: url('data:…')), and JS (string literal). Each has its own copy button. For SVG inputs, the tool also offers URL-encoded (typically smaller than base64 for text SVGs).
Batch mode
Drop multiple images to get a JSON lookup table of filename → data URI. Perfect for embedding an icon set directly into a JS module.