Image to Base64
Convert images to Base64 data URIs in your browser and copy the data URL, raw Base64, or HTML and CSS snippets. Nothing is uploaded.
A data URI packs an entire image into a single string. It starts with the data: scheme, followed by a media type such as image/png and a ;base64 flag, then a comma, and everything after that comma is the Base64 encoding of the file's raw bytes — text that any browser can decode straight back into the original picture.
Because the result is plain ASCII text, it can be pasted anywhere text is accepted: an HTML src attribute, a CSS url() value, a JSON payload, a Markdown document, or an HTML email. That makes data URIs a convenient way to ship tiny logos, icons, and decorative graphics without hosting separate files or configuring a CDN.
The convenience has a real cost. Base64 stores three bytes in four characters, so the encoded string is about one third larger than the source file, and inlined images bypass browser caching entirely — every page embedding the string transfers it again. For anything but small assets, a classic image file behind a cacheable URL is the better engineering choice.
Common uses
- Inlining a small set of icons into a stylesheet so pages render without extra image requests — handy in HTML email and locked-down environments where loading external assets is blocked or unreliable.
- Attaching a screenshot or chart to a JSON API call, webhook payload, or bug report field that only accepts text, instead of setting up file storage just for that one image.
- Embedding a logo straight into a self-contained HTML file, README, or interactive demo so the document keeps rendering correctly when it is opened offline or shared as a single attachment.
Frequently asked questions
- Why is the Base64 output larger than the original image?
- Base64 maps every three input bytes to four printable characters, so the encoded text is roughly 33 percent bigger than the source file, and the data: header adds a few more bytes on top. That overhead is exactly why inlining pays off only for small images.
- What size of image is suitable for inlining?
- A common rule of thumb is to inline only images under about 10 KB; this page shows a warning once your file passes 100 KB. Bigger images inflate every document that embeds them and cannot be cached, so host them as ordinary files instead.
- Should I Base64-encode SVG files too?
- Usually not. SVG is already text, so percent-encoding it directly into a data URI often produces a shorter string than Base64 and keeps the markup readable. Base64 only wins for SVGs that embed large binary blobs, such as raster images.
- What is the difference between the data URI and the plain Base64 output?
- The data URI is the complete ready-to-use string — data: scheme, MIME type, ;base64 marker, and payload. The plain output is only the encoded payload. Use the full URI in HTML and CSS; use the payload where an API asks for raw Base64 image data.
- Is my image uploaded to a server?
- No. Conversion happens locally through your browser's FileReader API, and pixel dimensions are read with native image decoding. Your file never leaves the device, so the tool is safe for confidential mockups and unreleased designs.