Image to Base64
Drop in one or more images and copy their Data URI, their Base64, or a snippet ready for HTML, CSS, or Markdown. You can also paste Base64 to see the image and download it.
Drop your files hereTap to choose your files
or click to choose · paste with Ctrl+VPNG, JPG, WebP, GIF, SVG, AVIF, ICO · up to 20 MB per image
Processed on your device: nothing is uploaded
Drop one or more images and get their Data URI, their Base64, and code ready for HTML, CSS, or Markdown.
Images
Describe the image for people who cannot see it. Leave it empty if it is purely decorative.
Export the table
Accepts a Data URI, a bare Base64 string, or the code of an img tag or a CSS url(). We detect the type from the bytes.
Paste some Base64 and see the image instantly.
Could not display the image
Recovered image
How to use it
- Drag your images into the box, choose them with a click, or paste them with Ctrl+V. We accept PNG, JPG, WebP, GIF, SVG, AVIF, ICO, and BMP, up to 20 MB each.
- Pick the output format: Data URI, plain Base64, an HTML img tag, a CSS background-image rule, or a Markdown link.
- Check the size. Base64 is 33% bigger than the file; if it goes over 10 KB we warn you and offer to optimize the image first.
- Copy the result or download it. With several images, you can export a table as CSV or JSON.
- To go the other way, open “Base64 to image”, paste the Data URI or the Base64, and download the image.
Frequently asked questions
What is a Data URI, and when should I use one?
It is an address that carries the image inside it: it starts with data:image/png;base64, followed by the Base64. It is useful for embedding small icons and logos in HTML, CSS, or email without requesting a separate file. With large images it is worse: the browser cannot cache them separately and the document gets much heavier.
How big is an image in Base64?
One third bigger than the original file, because every 3 bytes are written as 4 characters. A 30 KB image becomes about 40 KB. On this page you see both sizes and the exact increase.
Can I make an SVG Data URI smaller?
Yes. An SVG is text, so it does not need Base64: it can be encoded as a URL, escaping only a few characters. The result is shorter than Base64. You can also minify the SVG (remove comments, the XML prolog, and indentation) before encoding it.
Are my images uploaded to a server?
No. The conversion happens in your browser with JavaScript. You can check it in the Network tab of your developer tools: no request is sent with your files.
What happens if I rename a text file to .png?
We catch it. We do not trust the extension: we read the first bytes of the file (its signature), and if they are not an image, we tell you what it really is. The same happens in reverse with Base64 that is not an image.
Can I recover the image from a Base64 string?
Yes, in the “Base64 to image” tab. It accepts a Data URI, a bare Base64 string, or the code of an img tag or a CSS url(). It shows the preview, the dimensions, and the real type, and downloads it with the right extension.
When to embed an image as Base64
Embedding an image saves a server request, which matters for icons, small logos, or background images of a few KB. It is also useful in HTML emails, in stylesheets shipped as a single file, and in code examples. For photos, a separate file is still the best choice, because the browser can cache it.
Snippets this tool generates
- Data URI:
data:image/png;base64,iVBOR…, to use anywhere a URL is accepted. - HTML: an
imgtag with itsalt, width, and height. - CSS:
background-image: url("…");. - Markdown:
.
SVG: better without Base64
Since an SVG is already text, encoding it as a URL usually gives a shorter result than Base64. We escape only the characters that need it and swap double quotes for single quotes so it fits inside src="…" and url("…"). To work with any other kind of file or text, use the Base64 encoder and decoder.
Updated on September 29, 2026