Loading tool…
Sometimes the simplest way to ship a small icon is to embed it directly in your HTML, CSS or JSON. Drop in an image and copy it as a ready-to-paste data URI, raw Base64 string, img tag or CSS background, with the encoded size shown so you know what you are adding.
Processing locally on your device
Overview
Base64 represents binary data using 64 printable characters (A–Z, a–z, 0–9, + and /). Every 3 bytes of the image become 4 characters of text, so the encoded version is about 33% larger than the original file. A data URI wraps that text with a header describing the type, for example data:image/png;base64,iVBORw0KGgo…, which browsers treat exactly like a link to an image file.
The tool reads your image with the FileReader API and offers four outputs. The data URI is the complete string for use anywhere a URL is accepted. Raw Base64 is just the encoded data, useful for APIs and JSON payloads that expect it without a prefix. The HTML option wraps the data URI in an <img> tag, and the CSS option produces a background-image: url(…) declaration. Each output has a copy button, and the encoded size is displayed so you can judge the cost.
Inlining saves an HTTP request, which helps for tiny icons, placeholders and email templates. But inlined images can’t be cached separately, they block the HTML or CSS from finishing downloading, and the 33% overhead adds up. That is why the tool warns when an image is over about 100 KB: at that size, a normal image file is almost always the better choice.
| Original file | Base64 size (approx.) | Inline it? |
|---|---|---|
| 1 KB | 1.4 KB | Yes, ideal |
| 5 KB | 6.7 KB | Yes |
| 20 KB | 26.7 KB | Only if it saves a critical request |
| 50 KB | 66.7 KB | Usually not |
| 100 KB | 133.3 KB | No, serve as a file |
| 500 KB | 666.7 KB | No |
Open or drop an image.
Choose the output: Data URI, raw Base64, HTML <img> tag or CSS background-image.
Check the encoded size and any size warning.
Click copy and paste it into your code.
Use cases
Embed a small logo or icon so it appears even when the email client blocks external images. Support varies by client, so test before sending.
Bundle icons into one self-contained HTML file for reports, demos or offline documentation.
Inline a tiny background pattern, loading spinner or blurred placeholder to avoid an extra request.
Some APIs accept images only as Base64 strings. Copy the raw output and drop it into your request body.
Pro tips
Answers to common questions about the image to base64.
Base64 encodes every 3 bytes as 4 text characters, so output is about 33% larger. A 30 KB PNG becomes roughly 40 KB of text.
When it is larger than a few kilobytes, used on many pages, or below the fold. Separate files can be cached, lazy-loaded and downloaded in parallel.
The data URI includes the data:image/…;base64, prefix and works directly in src or url(). Raw Base64 is only the encoded characters, for systems that add their own wrapper.
Yes, every modern browser supports data URIs in img tags and CSS. Email client support is less consistent, so test important emails.
This tool encodes only. Pasting a data URI into a browser’s address bar will display the image, which you can then save.
No. ToolEnhancer processes files on your own device inside the browser. They are never sent to, stored on or seen by our servers.
Yes. The image to base64 is free to use with no sign-up, no watermarks and no daily limits.
Strip location and camera metadata from photos.
Pick any pixel colour from an image.
Extract dominant colours as HEX, RGB and HSL.
Inspect RGB and luminance histograms.
Diff two images side by side or overlaid.
Create QR codes with colours and logos.