Turn an image into a Base64 data URL to embed anywhere, or paste one to preview it. Local, no upload.
Encode an image as a data URL, or paste one to preview it. Everything happens in the browser.
What the image Base64 tool does
Open an image to get its Base64 data URL, which you can embed directly in HTML, CSS or JSON with no extra file. You can also paste a data URL to preview the image it represents.
Frequently asked questions
When is a data URL useful?
When you want a single self-contained file — an email template, a favicon sprite, or a JSON fixture — without hosting a separate image.
Will the data URL be large?
Yes. Base64 is about a third bigger than the binary, so it suits small icons more than full photos.
Is my image uploaded?
No. The file is read locally and encoded in the page.
How to use it
- Click or drag an image file into the input area labelled “Choose an image”. The file is read locally and the encoding field populates with a data URL beginning with
data:image/followed by the MIME type and base64 payload. - Locate the data URL in the output field below the image input. Select and copy it using CtrlC or right-click > Copy.
- To verify the result, paste any data URL into the second input labelled “Data URL (Base64)”. The page renders a preview of the decoded image so you can confirm the string is valid.
- Paste the encoded string directly into your HTML, CSS
background-image, or JSON file. No server round-trip is required.
Where it comes in handy
An email template builder requires all graphics to live inside the message body so spam filters do not block external image references. Encode a 24-by-24-pixel favicon as a data URL and embed it directly into the HTML — the resulting string is roughly 340 characters, which keeps the file compact enough to stay within typical 10-kilobyte inline style limits.
A design token system stores colour swatches and icons as JSON fixtures for a component library. A 48-by-48 SVG icon rendered as a PNG and base64-encoded produces about 2.1 kilobytes per asset, which fits comfortably inside a 50-kilobyte JSON bundle containing 30 icons.
A single-page landing page runs entirely from a static CDN cache with no image folder. Converting five hero photographs at 1200 by 800 pixels each adds approximately 380 kilobytes to the page HTML. The page loads faster because the browser makes one HTTP request instead of six.
Worth knowing
- Base64 increases binary size by roughly 33 percent. A 100-kilobyte JPEG becomes about 133 kilobytes as a data URL. Large photos are better hosted as separate files.
- The tool preserves the source pixel dimensions but does not re-encode the image data. If you drop in a lossy JPEG, the same compression artifacts remain in the output string.
- Safari and older versions of Edge impose a 32-kilobyte limit on the
srcattribute of inline images. Data URLs exceeding that threshold may fail to render in those browsers even though the encoding itself is correct.