Results are provided for informational purposes only and may contain errors. Please verify important information independently. Use of this tool is at your own risk.
What the Image to Base64 does
Image to Base64 turns an image file into a data URL: a single line of text that starts with data:image/png;base64, (or the type of your file) followed by the image bytes encoded as Base64. Choose a PNG, JPG, GIF, SVG, WebP or any other image and the text appears with a preview, ready to copy.
The file is read with the browser's FileReader, so it is never uploaded. A data URL can be used anywhere a normal image address works: in an <img src>, in CSS background-image: url(...), in a JSON payload or in an email template. Base64 makes the data about a third larger than the original file, so it suits small images best.
When to use it
- Embedding a small icon or logo in CSS so the page makes one request fewer.
- Putting an image inside a single self-contained HTML file, such as a report or a demo.
- Sending an image in a JSON API request that does not accept multipart uploads.
- Adding an inline image to an HTML email signature or a test fixture.
Worked example
Input
pixel.png (1 × 1 px, blue, 69 bytes)Output
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mOwbvoGAAKvAbSJsn7VAAAAAElFTkSuQmCCCommon questions about the Image to Base64
Why is the Base64 text bigger than my image?
Base64 writes every 3 bytes as 4 text characters, so the result is about 33% larger than the file. A 30 KB image becomes roughly 40 KB of text. Gzip or Brotli compression on the server wins some of that back.
When should I not inline an image?
Avoid it for large photos and for images used on many pages. A normal image file is cached once by the browser, while an inline one is downloaded again with every HTML or CSS file that contains it.
How do I use the result in CSS?
Wrap it in url(): background-image: url("data:image/png;base64,...");. For SVG icons, a URL-encoded SVG is often smaller than Base64; the URL Encoder page can prepare one.
How do I turn Base64 back into an image?
Paste the full data URL into a browser address bar and save the image, or decode the part after the comma with the Base64 Decoder tool if you need the raw bytes.
Is this tool free?
Yes, it's free to use. No signup, no email required. Get results on this page.
How do I get my result?
Use the tool on this page. Your result appears here; no email delivery is required.