Image to Base64
Convert a PNG, JPG, GIF, WebP or SVG image to a Base64 string or data URI.
Drag & Drop image here
Supports JPG, PNG, GIF, WebP, SVG
Related Image Tools
This tool converts an image to Base64. Add a PNG, JPG, GIF, WebP or SVG file and it gives the encoded string in the form you need: a data URI, raw Base64, a CSS background rule or an HTML img tag. The image is not re-compressed, and it is read in your browser, so nothing is uploaded.
The Four Output Formats
| Format | What you get | Use it for |
|---|---|---|
| Data URI | data:image/png;base64,iVBOR... | Anywhere a URL to an image is expected |
| Raw Base64 | iVBOR... | JSON, API requests, config files |
| CSS | background-image: url("data:..."); | A stylesheet |
| HTML | <img src="data:..." alt="" /> | A web page or an HTML email |
How to Convert an Image to Base64
- Add the image: drag a file into the box above or click to choose one.
- Pick the format: data URI, raw Base64, CSS or HTML.
- Copy or download: copy the string to the clipboard, or save it as a .txt file if it is long.
When Base64 Images Help
A Base64 image travels inside another file, so the browser does not have to request it separately. That is useful for:
- small icons and logos placed directly in CSS or HTML;
- a single HTML file that must work with no other files beside it;
- sending an image through an API that only accepts text, such as JSON.
It is a poor choice for photos and other large images. The text is about a third larger than the file, the browser cannot cache it apart from the page or stylesheet that holds it, and a long string makes that file slow to load and awkward to edit. Keep large images as ordinary files and link to them.
Why the Size Grows by a Third
Base64 uses 64 characters that are safe in text: the letters A to Z in both cases, the digits and two symbols. Each character carries 6 bits, while a byte holds 8. Three bytes are 24 bits, which fit exactly into four characters, so every 3 bytes of the image become 4 characters of text. When the file length is not a multiple of three, one or two = signs are added at the end as padding.
Frequently Asked Questions
How do I convert a PNG to Base64?
Add the PNG to the converter above. The Base64 string appears at once. Choose the form you need, a data URI, raw Base64, a CSS rule or an HTML img tag, then copy it or download it as a text file. JPG, GIF, WebP and SVG files work the same way.
Does converting to Base64 change the image quality?
No. Base64 is a way of writing the same bytes as text. The file is not re-compressed or resized, and decoding the string gives back the original file exactly.
What is the difference between raw Base64 and a data URI?
Raw Base64 is only the encoded data. A data URI puts a short label in front of it, such as data:image/png;base64, which tells a browser what kind of file follows. Use the data URI in HTML and CSS, and raw Base64 when an API or a config file asks for the encoded data alone.
Why is the Base64 string larger than the image?
Base64 writes every 3 bytes of the file as 4 text characters, so the result is about one third larger than the original. A 30 KB icon becomes about 40 KB of text. The converter shows both sizes.
Is Base64 a form of encryption?
No. Anyone can decode it. It hides nothing and should not be used to protect an image.
Is my image uploaded?
No. The file is read by your browser on your own device and is not sent to a server.