Image to Base64
Turn a PNG, JPG, GIF, WebP or SVG file into a Base64 text string. Copy it as a ready-to-use data URL, a raw string, a CSS background rule or an HTML image tag.
Runs in your browser. Your files are never uploaded.
Loading Image to Base64…
How to use Image to Base64
- Choose an image file or drop it onto the box.
- Select the output style: data URL, raw Base64, CSS background or HTML img tag.
- Check the size figures to see how much larger the text is than the file.
- Press Copy all, or save the result as a text file.
What Base64 encoding is
Computers store images as binary bytes, but many places, including HTML attributes, CSS files, JSON payloads and email bodies, can only hold plain text. Base64 solves this by mapping binary data onto a set of 64 safe characters: capital and small letters, digits, plus and slash, with equals signs for padding. The encoding is completely reversible and is not encryption: anyone can decode the text back to the picture.
A data URL wraps that text with a media type so the browser knows what it is looking at. For example, a PNG starts with data:image/png;base64, and then the encoded characters. You can paste it into the src of an img tag or the url() of a CSS background.
When inlining makes sense
- Small icons or placeholder images under about 10 KB.
- HTML emails and single-file documents that must work without external files.
- Test data and API examples that carry an image inside JSON.
- Prototypes and code snippets where adding a separate file is inconvenient.
- Avoid it for hero images, galleries and anything above a few tens of kilobytes.
Tips and privacy
If you only need the encoded text for an API field, choose Raw Base64, which omits the data: prefix. If you are pasting into a stylesheet, the CSS option adds the surrounding declaration. Remember that some systems limit URL length, and older browsers cap data URLs at a few megabytes, so keep inline images small.
The conversion uses your browser file reader and nothing is sent anywhere. Because Base64 is not a security measure, do not treat an encoded image as hidden or protected; anyone with the string can recover the original file.
Why use this image to base64 tool
- Four output styles. Get a data URL, plain Base64, a CSS declaration or an HTML tag without editing by hand.
- Size comparison. See the original size, encoded size and percentage overhead before deciding to inline.
- Handles big strings. Long output is shown in a trimmed preview while Copy and Save still include every character.
- Local only. Encoding runs in your browser; the image is not uploaded.
Frequently asked questions
What is a Base64 data URL?
It is a way of placing the file contents directly inside a web address, in the form data:image/png;base64, followed by the encoded text. Browsers display it like a normal image without making a separate request, which is handy for small icons in HTML, CSS or JSON.
Why is the Base64 text bigger than the original file?
Base64 represents every three bytes of binary data with four text characters, so the result is about one third larger, plus a short prefix. The tool shows the exact overhead for your file.
Should I embed all my images as Base64?
No. Inlining helps for tiny images such as icons, because it saves a network request, but large inline images bloat your HTML or CSS, cannot be cached separately and slow down the first render. Regular files are better for photos.
More free tools
Image Compressor
Reduce image file size up to 90% without visible quality loss. Compress JPG, PNG and WebP in your browser. Free, private, batch download.
Open toolCrop Image
Crop any photo online with a drag-to-select box and presets for 1:1, 4:3 and 16:9. Works on phones, runs in your browser, so your image is never uploaded.
Open toolRotate & Flip Image
Rotate an image 90, 180 or 270 degrees or flip it horizontally or vertically, then download it as PNG or JPG. Free, instant and done in your browser.
Open tool