How do I convert an image to Base64?
To convert an image to Base64, open FixDoks's Image to Base64 tool, add a PNG, JPG, SVG, GIF, WebP or ICO file and click Convert to Base64. Copy the data URI, the raw Base64 text, an HTML tag or a CSS rule. Switch to Base64 to image to decode text back into a file. Everything runs in your browser.
Image to Base64 at a glance
| Input | PNG, JPG, SVG, GIF, WebP, ICO, or Base64 text |
|---|---|
| Output | Base64 data URI, or a decoded image file |
| Processing | In your browser; your files are not uploaded |
| Price | Free, no watermark |
| Download | Free Google sign-in |
| Works on | Chrome, Edge, Safari and Firefox on Windows, Mac, Android and iPhone |
How to use Image to Base64
- Click Select image and choose a PNG, JPG, SVG, GIF, WebP or ICO file.
- Click Convert to Base64.
- Copy the data URI, the raw Base64, the ready-made HTML tag or the CSS rule. To go the other way, switch to Base64 to image and paste your text.
What is a Base64 image?
Base64 is a way of writing binary data, like an image file, using only letters, numbers and a few symbols. A Base64 image can be pasted straight into HTML, CSS, JSON, an email template or source code as text. Wrapped in a data URI (starting with data:image/png;base64,) it works anywhere a normal image URL is accepted.
When inlining an image helps
- Small icons and logos in HTML emails or single-file web pages, so there is no separate file to host.
- CSS backgrounds for tiny decorative images, saving an extra network request.
- APIs and JSON that expect images as text fields, such as some AI, OCR and document APIs.
- Testing and prototypes, where you want a self-contained file.
When not to use it
Base64 text is about a third bigger than the original file, and inlined images cannot be cached separately by the browser. For photos and anything over a few kilobytes, a normal image file is faster. Compress the image first with the image compressor if you must inline it.
Decoding Base64 back to an image
Switch to Base64 to image and paste either a full data URI or plain Base64 text. The tool detects the image type from the data, shows a preview and lets you download the file with the right extension. If the text is not valid Base64, or decodes to something that is not an image, it tells you.
Private
Encoding and decoding happen in your browser. Images and text are never sent anywhere, so it is safe for internal assets and API payloads.
Examples
An HTML image tag with an inline image looks like <img src="data:image/png;base64,iVBORw0..." alt="">. In CSS, a small icon can be used as background-image: url("data:image/svg+xml;base64,...");. For SVG icons, a URL-encoded SVG is often shorter than Base64, but Base64 works everywhere and is simpler to copy.
Keep inline images small
A good rule is to inline only images under about 5 to 10 KB, such as icons, logos and tiny patterns. For anything bigger, host the image as a file. Before encoding, compress PNG icons with the PNG compressor or convert SVG logos to a small PNG; smaller input means shorter Base64 text and faster pages.
SVG files are encoded as they are, which keeps them sharp at any size. ICO and GIF files work too, and the data URI includes the correct image type automatically, so browsers know how to display it.