How to convert an image to Base64
- Select Choose files or drop your image on the box. You can convert several at once.
- The result appears as text. Select Copy to put it on your clipboard, or Download to save a text file.
- Leave Include the data: prefix on for a ready-to-use data URI, or turn it off for the raw Base64 text.
What Base64 is for
Base64 turns binary data, such as an image, into plain text made of letters, digits, plus and slash. A data URI adds a prefix like data:image/png;base64, so browsers can read the image straight from text. Developers use it to embed small images in HTML, CSS, JSON, emails and markdown without a separate file, which saves a network request.
Example uses
- Inline a small icon in CSS:
background: url(data:image/png;base64,...). - Put a logo in an HTML email so it does not depend on an external server.
- Send an image through an API that only accepts text.
- Store a tiny placeholder in JSON.
Things to know
Base64 makes data about 33 percent larger than the original file, and the text cannot be cached separately by the browser. It is best for images under a few kilobytes. For larger pictures, a normal file is better. Shrink your image first with the image compressor or the image resizer to keep the string short.
SVG files work too and keep their type, so a logo can be pasted directly. Very large images create very long strings, and only the first part is shown in the preview. The full text is in the copy and download.
Tips
- Turn SVG icons into PNG first with SVG to PNG if the target does not support SVG.
- Make a full set of icons with the favicon generator.
- Try PNG to WebP to make the image smaller before encoding.
The conversion happens in your browser. Your image is never uploaded.