Image to Base64 (data URI)
Encode an image as a Base64 data URI for inline use.
Click to choose or drag & drop an image
PNG, JPG, WEBP, GIF, SVG
How to use the image-to-Base64 tool
- Drop in an image — PNG, JPG, WebP, GIF or SVG. It's encoded the moment it loads; you get a preview and the full data URI in the text box.
- Check the size note: it shows the original file size next to the Base64 size, which is always about a third larger (Base64 turns every 3 bytes into 4 characters).
- Copy the flavor you need: the raw data URI, a ready-to-paste
<img>tag, or a CSSbackground-imagerule. - Paste it into your HTML, stylesheet, JSON or wherever the image needs to live — no hosting, no extra request.
Common uses
- Inline small icons and logos into CSS so a landing page makes fewer HTTP requests.
- Build single-file HTML — reports, offline docs, email-able dashboards — where every image must be embedded rather than linked.
- Ship tiny images inside JSON fixtures, API mocks or config files that can't reference external assets.
- Prototype fast: paste an
<img>tag with the picture baked in, no asset folder or dev server involved. - Embed a small logo in an HTML email template — with testing, since client support for data URIs varies.
Tips & limitations
- The encoding is exact — your file's bytes are wrapped as-is, with no re-compression or quality change. A bloated source stays bloated: shrink big images with the image compressor first, then encode.
- Inlined images can't be cached separately from the page, so an image repeated across pages is re-downloaded with each one. Reserve inlining for small assets — the tool flags any output over about 200 KB.
- Email client support is patchy: several popular clients (Gmail included) won't display data-URI images, so test before building a signature or campaign around one.
- It encodes one file at a time, and the output is plain text — a multi-megabyte image becomes a multi-megabyte wall of characters that will make code editors crawl.
How it's built & why it's safe
The file is read with the browser's FileReader.readAsDataURL, which produces the data: URI directly — MIME type, the ;base64, marker and the encoded bytes. There's no canvas and no re-encoding, so what you embed is byte-for-byte your original file. The copy buttons wrap that same URI in an <img> tag or a CSS rule for you. Everything happens locally in your browser — the image is never uploaded anywhere.
Related tools: Base64 Encoder / Decoder · Image Compressor · SVG to PNG
Further reading: How to compress images for the web without losing quality
Frequently asked questions
What is a data URI, exactly?
It's a URL scheme that carries the file inside itself: data:image/png;base64, followed by the encoded bytes. Anywhere a browser accepts an image URL — src attributes, CSS url() — it can accept a data URI instead.
Why is the Base64 version bigger than my file?
Base64 represents every 3 bytes of binary data as 4 text characters, so the output is roughly 133% of the input size. That overhead is inherent to the encoding, not something the tool adds.
When should I inline an image instead of hosting it?
Inline when the image is small and used in one place — icons, tiny logos, decorative touches. Host it when it's large, reused across pages, or benefits from caching and lazy loading.
Does encoding change the image quality or format?
No. The bytes are wrapped exactly as they are — a JPG stays a JPG at identical quality. If you want a smaller result, compress the image first; the data URI shrinks in proportion.
Does it work with SVG?
Yes — an .svg file is encoded like any other, with the image/svg+xml MIME type. Since SVG is already text you could paste the markup into HTML directly, but a data URI is handy for CSS backgrounds.
Is my image uploaded to a server?
No. FileReader runs inside your browser, and the resulting text stays on the page until you copy it. Nothing is transmitted, stored or logged.