Image to Base64 Converter Online Free
Convert images to a Base64 string or data URI online. Copy directly for HTML, CSS, JSON, or API payloads with 100% private, on-device encoding.
100% private. Nothing is uploaded.
How to Convert an Image to Base64 in 3 Steps
Upload Your Image
Drop a JPG, PNG, WebP, GIF or SVG file on the box, or click to choose one. The file is read on your device.
Copy the Output
You get the Full Data URL (data:image/…;base64,…) and the Base64 String Only, plus the file size and the Base64 size. Click Copy next to the one you need.
Paste It Into Your Code
Use the data URL in an HTML img src or a CSS url(). Use the raw Base64 string for JSON bodies and API calls.
Key features
One-Click Copy
Data URI and Raw Base64
- Files Stay on Your Device
- JPG, PNG, WebP, GIF, SVG
- Free, No Account Needed
When to Use Base64-Encoded Images
CSS & Styling
- Embed small icons in CSS as background-image data URIs
- Inline a loading spinner or placeholder image in a stylesheet
- Ship a component library's UI icons inside its CSS
- Add an SVG pattern or texture without a separate file
HTML & Documents
- Put an image inline in an HTML img src as a data URI
- Build single-file HTML pages that work with no other files
- Add logos or charts to HTML reports you share as one file
- Show test images in demos and prototypes without hosting them
APIs & Code
- Send images in JSON payloads that expect Base64 text
- Attach images to AI vision API requests that take Base64 input
- Store small images in text fields of a database or config file
- Load a test image in JavaScript without a separate file request
What Is Base64 Image Encoding?
Base64 image encoding turns the bytes of an image file into plain text made of 64 characters: A–Z, a–z, 0–9, + and /. That text can sit inside HTML, CSS or JSON, where a file can't. It is not compression or a format change. The picture stays exactly the same, but the text is about a third larger than the file.
Image to Base64 for HTML, CSS and APIs
The converter gives you two strings: the Full Data URL and the Base64 String Only. Here is where each one goes, and when inlining an image is worth it.
How Do I Use a Base64 Image in HTML or CSS?
Copy the Full Data URL for HTML and CSS. Copy the Base64 String Only for JSON and most APIs.
- HTML: paste the Full Data URL as the src of an img tag, like src="data:image/png;base64,iVBOR…".
- CSS: wrap the Full Data URL in url(), like background-image: url("data:image/png;base64,iVBOR…").
- JSON and APIs: send the Base64 String Only. If the API asks for the type, put it in its own field, such as image/png.
When Should You Use Base64 Images?
Use Base64 for small images that have to travel inside a text file. Skip it for photos and large images.
- Good fit: icons, logos and placeholders of a few KB, where saving a separate file request matters.
- Good fit: single-file HTML pages, reports and demos that must work with no other files.
- Good fit: APIs and JSON payloads that only accept text.
- Poor fit: photos and large images. They bloat the HTML or CSS, and the browser can't cache them apart from the page.
How Much Bigger Does Base64 Make an Image?
Base64 turns every 3 bytes into 4 characters, so the text is about 33% larger than the file. A 30 KB image becomes about 40 KB of Base64. After you convert, the tool shows both sizes side by side. To keep the string short, shrink the file first with the image compressor.
Do Base64 Images Work in Email?
Not reliably. Gmail is widely reported to strip Base64 images from the message body, and support differs between other email apps. For email, link to a hosted image or attach it as an inline (CID) image instead.
Related Developer Tools
Tools to prepare an image before you encode it.
Base64 to Image
Turn a Base64 string or data URI back into an image you can preview and download.
Image Converter
Change the image format before you encode it.
Image Metadata Viewer
See the EXIF and other metadata stored in an image file.
Image Compressor
Make the image file smaller first, so the Base64 string is shorter.
Image to Base64 FAQ
Common questions about converting images to Base64 and data URIs
Can I convert Base64 back to an image?
Yes. Paste the string into the Base64 to Image converter to preview it and download it as a file. It accepts a full data URI or a raw Base64 string.
What is the difference between a data URI and a Base64 string?
A data URI (also called a data URL) is the Base64 string with a prefix that names the file type, like data:image/png;base64, followed by the string. A raw Base64 string has no prefix. Use the data URI in HTML and CSS. Use the raw string for APIs that take the type in a separate field. The tool shows them as Full Data URL and Base64 String Only, each with its own Copy button.
Is there a size limit for Base64 images?
The converter has no size limit of its own. Large images still make very long strings, which slow down code editors and the pages that load them. Keep inline images to a few KB and link to bigger files instead.
Can I convert SVG to Base64?
Yes. Drop an SVG file and you get a data URI that starts with data:image/svg+xml;base64. It works in an img tag and in CSS url(). For CSS, a URL-encoded SVG is often shorter than Base64, because SVG is already text.
Can I copy or download the Base64 string?
You can copy it. The Full Data URL and the Base64 String Only each have a Copy button. There is no download button, so to save the result, paste it into a text file. Click Show full string to see the whole data URL on the page.
Which image formats can I convert to Base64?
Any file your browser reads as an image, including JPG, PNG, WebP, GIF, SVG, AVIF, BMP and ICO. The encoder keeps the file exactly as it is: it doesn't resize it, recompress it or change its format. If nothing happens after you drop a file, your browser didn't recognize it as an image.