Convert an image to Base64
Drop in an image and copy it as base64. Pick the form you need and the text below reformats without re-reading the file.
The file is read and encoded inside this page, so an image you would not upload to a stranger stays on your machine.
How to use it#
- Drop an image onto the box above, or click it to choose one.
- Pick the output you want: a data URI, the base64 on its own, a CSS rule or an img tag.
- Copy the text beside the caption and paste it where you need it.
What a data URI actually is#
A data URI carries the file itself instead of pointing at one. The prefix says what the bytes are and how they are written, and everything after the comma is the image encoded in the 64 printable characters that survive being pasted into source code, JSON or an email.
Anywhere a URL goes, a data URI goes: the src of an img tag, a CSS background, an email template, the icon field in a manifest. The browser decodes it and draws the picture without making a second request.
When inlining is worth it, and when it is not#
Encoding makes the image about a third bigger, and that text has to travel inside whatever document holds it. For a small icon that saves a network round trip, that trade is usually worth it, and it removes a request that would otherwise block a page from finishing.
For anything sizeable it goes the wrong way. A 300 KB photograph becomes 400 KB of text that the browser cannot cache on its own, so it is downloaded again with every copy of the page that holds it. A rough line is a few kilobytes: below that, inline; above it, keep the file.
Where the encoded text tends to go#
Email is the most common reason people reach for this, because a lot of mail clients block linked images and will render an inlined one. The other frequent case is a build system or a CMS that will only take a single file and has nowhere to put an image alongside it.
SVG is worth a special mention. It encodes fine here, but an SVG is text already, so pasting the markup straight into your HTML is smaller and leaves the styling reachable from CSS.
Frequently asked questions#
Is my image uploaded to encode it?
#
No. The file is read with the browser file API and encoded in this tab. Nothing is sent anywhere, which matters more than usual here because people encode logos and documents that are not public yet.
Why is the base64 bigger than the file?
#
Base64 writes every three bytes as four characters, so the text is about a third larger than the file it came from. There is no way around that, it is how the encoding works.
When is inlining an image worth it?
#
When the image is small, only used once, and saving a network request matters more than caching it. Icons and email images fit. Photographs and anything reused across pages are better left as files, because an inlined image cannot be cached on its own.
What is the difference between the four output forms?
#
The data URI is the full string including the prefix that names the file type. Base64 only is the same data without that prefix, for somewhere that adds it for you. The CSS and HTML forms wrap the data URI in the rule or tag you would otherwise write by hand.
Does it work with SVG files?
#
Yes. An SVG encodes like any other image. Pasting the SVG markup directly is usually the better option though, since it is smaller than the base64 and stays styleable from CSS.
Can I turn a base64 string back into an image?
#
Not on this page, though your browser can: paste a full data URI into the address bar and it renders the image, which you can then save. The base64 encoder and decoder handles text in both directions.