Image → Base64 / Data URL — PNG / JPG / WebP / SVG

💡 How to Use Data URLs

• Embedding small icons or 1–2 KB images reduces HTTP request count.

• Base64 encoding adds ~33% size overhead. Embedding large images can hurt performance.

• For SVG, consider inlining as plain XML — often smaller than Base64.

🔗 Related Tools

・Base64
・Image Formats

📖 Where people get stuck

Converts an image to Base64 and exports it as a data URL, a CSS background-image, an HTML img tag or Markdown. Everything runs in the browser and the file is never uploaded. A data URL removes one HTTP request, but that does not necessarily make anything faster — the data grows by about 33 percent and the browser cache no longer applies. Weighing those two against each other is the only real decision when using this tool.

Case	What happens	What to do
Embedding it made the page slower, not faster	An image turned into a data URL cannot be cached on its own, because it is now part of the CSS or HTML that contains it. In CSS the effect is largest: stylesheets block rendering, so the bytes of the image translate directly into a delay before first paint. Twenty images of 10KB become one 266KB render-blocking resource in place of twenty that could have loaded in parallel. And because changing a single image invalidates the cache for the whole stylesheet, every user re-downloads all of it on every update.	A data URL only wins for small icons of a few kilobytes — as a guide, one or two kilobytes, and something that rarely changes: a checkmark, an arrow, a loading spinner, the small furniture of a UI. Anything larger should be loaded as a normal `<img>`, where the caching and responsive-image (`srcset`) benefits reliably outweigh one saved request. And the premise itself has shifted: since HTTP/2 the cost of an extra request has fallen sharply — fewer requests means faster is a rule of thumb from the HTTP/1.1 era and no longer holds automatically. The test is to compare how often the image changes with how often the stylesheet is served.
Base64 encoding an SVG as well	SVG is text, so Base64 encoding it is a losing move. Base64 turns three bytes into four characters, so it always adds about 33 percent, and because the result is close to random, gzip and Brotli barely touch it. The original SVG is full of repeated markup and would compress by around 70 percent left as it is, but Base64 destroys that property completely. Optimising an SVG and then Base64 encoding it frequently cancels out exactly what the optimisation saved.	If you are embedding an SVG, percent-encode it rather than Base64 it — `data:image/svg+xml,%3Csvg...`. Only `#`, `%` and `"` must be escaped and almost everything else can sit as it is, so it comes out smaller than Base64 and still compressible. Better still, an SVG need not be a data URL at all — write it inline: putting the `<svg>` directly into the HTML lets you recolour it from CSS, animate it, and it is shorter than the data URL. And if you use several icons, combine them into an SVG sprite rather than embedding each one, which wins on both request count and total bytes.
The data URL is blocked by CSP or by the destination	With a Content Security Policy such as `img-src 'self'`, images using the `data:` scheme are rejected and nothing appears — an error goes to the console, but visually it is just a missing image, so the cause is easy to miss. The same happens at the destination: Gmail does not display data URL images in HTML email, which surfaces as looking correct in your local preview and missing in the inbox. The expectation that embedding guarantees display is the one most likely to be betrayed.	If you use CSP, allow `data:` explicitly — `img-src 'self' data:` — but do not fold it into `default-src`. Permitting `data:` for scripts and styles as well widens the XSS attack surface; restricting it to images is the correct granularity. For HTML email, do not use data URLs at all — reference external images by absolute URL, and note that most clients block external images by default anyway, so what matters more is a message that reads without them. And on every path, there is no way to be sure other than actually delivering it and opening it in the real environment — a local preview tells you nothing about any of this.

Base64 is not even obfuscation. A data:image/png;base64,... sitting in a stylesheet can be decoded and viewed on the spot in the browser developer tools — embedding a confidential screenshot or an unreleased illustration on the reasoning that it is hidden inside the CSS is simply wrong. There is also a caution specific to this tool: it Base64-encodes the file bytes as they are, so the EXIF survives intact. Unlike image tools that pass through a canvas, the GPS coordinates, the capture timestamp and the camera model are all contained in the data URL you generate. Before publishing a phone photograph as a data URL, strip the EXIF first — the format converter and the resize tool both go through a canvas, which removes it along the way. The intuition that embedding hides the contents fails on both counts.

📖 How to Use

1

Drop or click to select an image

Drag and drop an image onto the drop zone, or click to select a file. PNG, JPG, WebP, SVG, and most other formats are supported.
2

Select output format

Choose Data URL, Base64 only, CSS background-image, HTML img tag, or Markdown format.
3

Copy and use

Click Copy to save the encoded text to your clipboard, then paste it into your code.

❓ Frequently Asked Questions

Does it support pasting from clipboard?

Yes. Copy an image to your clipboard (e.g., a screenshot), then press Ctrl+V / Cmd+V anywhere on the page to load it automatically.

How does Base64 affect file size?

Base64 encoding increases the file size by approximately 33%. Embedding large images can hurt page load performance.

When is it appropriate to use a Data URL?

Data URLs work well for small icons or inline images under 1–2 KB to reduce HTTP requests. They are not suitable for large images.

🐛 Found a bug or issue with this tool?

Free to use, no signup. Even just the steps to reproduce are helpful. Reports go directly to the operator and help us fix issues.

🖼️ Image → Base64 / Data URL Converter

Preview

💡 How to Use Data URLs

🔗 Related Tools

📖 Where people get stuck

📖 How to Use

❓ Frequently Asked Questions

Thanks for your report!