Image
Click to choose a file, or drag and drop
Output
Add an image and click Generate.
More in this kitAll of Image Toolkit
About Image to Base64
Image to Base64 converts an image into a data URI: a long text string that contains the whole image. You can paste it straight into HTML, CSS or JSON to embed a small icon or placeholder without hosting a separate file.
How to use it
- Add an image using the file picker or by dragging it in.
- Click Generate.
- Use the Copy button to copy the complete data URI.
- Paste it wherever you need it, for example as the src of an img tag or inside a CSS url().
Good to know
- Very long results are shortened in the on-screen preview, but the Copy button always copies the full string.
- Base64 makes data about a third larger than the original file, so it is best suited to small images such as icons.
- Embedded images cannot be cached separately by the browser, which is another reason to keep this technique for small assets.
- Your image is processed by your browser on your own device. It is never uploaded to a server.
Common questions
What does a data URI look like?
It starts with a prefix such as data:image/png;base64, followed by the encoded image. Browsers read the prefix to know what kind of file it is.
Should I embed large photos this way?
Usually not. A large photo becomes a very long string that bloats your HTML or CSS. Serve large images as regular files instead.