How to convert an image to Base64
- Stay on the Image to Base64 tab. Drop an image on the box, press Enter on it to browse your files, or paste a copied image with Ctrl+V. A 48 x 48 sample is already loaded.
- Choose an Output format: Data URI, Raw Base64 (no prefix), HTML img tag, CSS background-image or Markdown image. HTML and Markdown also use Alt text, which starts as the file name.
- Click Copy output, or Download as .txt for long strings. To go the other way, open Base64 to image, paste the text and click Decode and preview.
How the encoding works
Base64, defined in RFC 4648, turns every 3 bytes of the file into 4 text characters, so the length is 4 x ceil(bytes / 3), about a third more than the original. A data URI, from RFC 2397, is that text with a data:image/png;base64, prefix so a browser can use it wherever it expects a URL.
The tool encodes the original file bytes inside your browser, and the page makes no request with your image. Nothing is recompressed, so everything stored in the file travels with it, including the camera and GPS data in a phone photo.
Worked example
With the sample loaded, the page shows sample-icon.png, image/png, 48 x 48 px, original size 285 B, Base64 length 380 characters and a size increase of +33.3%, because 285 / 3 = 95 groups and 95 x 4 = 380. The Data URI output is 402 characters (a 22 character prefix plus 380) and starts data:image/png;base64,iVBORw0KGgo. The HTML img tag is 455 characters, the CSS rule 428 and the Markdown image 418.
When a Base64 image is a good idea
Inline images save one request, which helps for icons and logos under about 10 KB, single-file HTML pages, and JSON that must carry a picture as text. They cost a third more bytes and cannot be cached apart from the page, so photos belong in normal files. Shrink an image first with the image compressor or image resizer if you still want it inline. Email support is mixed (Outlook for Windows does not render Base64 GIFs), so check Can I email before relying on it.
Limits and edge cases
- Files over 30 MB are refused. Very long output shows only its start in the box, but Copy output and Download as .txt always use the full text.
- HEIC files encode correctly but have no preview, because browsers cannot display them. Convert them with the HEIC to JPG converter first. Animated GIFs stay animated.
- Decoding accepts raw or URL-safe Base64, wrapped lines, a data URI, an img tag or a CSS url(), and checks the first bytes to find the real image type. For text or other files use the Base64 encoder and decoder.
Image to Base64 FAQ
Does Base64 make an image bigger?
Yes, by about 33%. Every 3 bytes become 4 characters, so the 285 byte sample becomes 380 characters. A data URI adds a short prefix on top.
When should I use a Base64 image instead of a file?
Use it for icons and logos under about 10 KB, single-file HTML, and JSON or CSS where a separate request is a nuisance. For photos and anything large, a normal file loads faster and caches better.
How do I turn Base64 back into an image?
Open the Base64 to image tab, paste the string, click Decode and preview, then click Download image to save it with the correct extension.
Does the Base64 include my photo's location?
Yes. The file is encoded exactly as it is, so GPS, date and camera data stored in a photo go into the string. Strip the metadata first if that matters.
What is the difference between Base64 and a data URI?
Base64 is the encoding, just the text characters. A data URI wraps that text in a prefix such as data:image/png;base64, so a browser can treat it as a link. Use raw Base64 for APIs and the data URI inside src or url().
Sources: RFC 4648, Base64 encodings; RFC 2397, the data URL scheme; MDN, data URLs; Can I email, Base64 images.