Browse for an image or drag & drop it here.
You can also paste from the clipboard.
Load an image to convert it
Image to Base64 Converter
Turn any image into a Base64 string and ready-to-paste code.
About the Image to Base64 Converter
What is this tool?
This tool converts an image file into a Base64 string — text that represents the exact bytes of the image, which you can paste straight into code instead of hosting a separate file. Drop, browse or simply paste an image from your clipboard, and you instantly get five ready-to-use snippets: the raw data URI, the bare Base64 string, an HTML img tag with the correct width and height already filled in, a CSS background-image rule, and a Markdown image. Everything happens in your browser; the image is never uploaded.
Because Base64 makes files about a third larger, the tool also helps you fight back: re-encode the image as WebP or JPEG with a quality slider, or cap its width, and watch the character count drop. The size chip tells you exactly how many characters you are about to paste into your codebase and how much overhead the encoding added — if the string crosses into performance-problem territory, we warn you before you ship it.
How to Use This Tool
- Load your image. Drag and drop it, click to browse, or paste it straight from the clipboard — a screenshot works fine.
- Optionally shrink it. Switch Encoding from Keep original to WebP or JPEG, tune the quality, or set a max width. The snippets update live.
- Copy the snippet you need. Each output block has its own copy button — data URI, raw Base64, HTML, CSS or Markdown.
- Or save it. Download .txt writes the full data URI to a file, which is easier to handle than a multi-megabyte clipboard.
Common Use Cases
Where inline images actually earn their keep:
- Small icons and logos in CSS: one fewer HTTP request, and the icon can never 404.
- Single-file HTML: reports, invoices and email templates that must work as one self-contained file.
- Prototypes and sandboxes: CodePen, JSFiddle and similar tools have nowhere to upload assets — inline them instead.
- Config and JSON payloads: APIs and manifests sometimes expect image data as a Base64 field.
- Related tools: decode strings back with the Base64 to image converter, inline vector graphics with the SVG to data URI converter, or encode plain text with the Base64 encoder/decoder.
Frequently Asked Questions
How do I convert an image to Base64?
Load the image into the tool by dropping it, browsing for it, or pasting it from your clipboard. The conversion happens instantly in your browser, and you get the Base64 string in five formats: a plain data URI, the raw string without a header, an HTML img tag, a CSS background-image rule, and a Markdown image. Click the copy button next to the one you need.
What is a data URI?
A data URI is a way of writing a whole file inside a URL. It looks like data:image/png;base64, followed by the Base64 text of the file. Browsers treat it exactly like a normal image URL, so it works anywhere a URL does: img tags, CSS backgrounds, even favicons.
Does Base64 make images bigger?
Yes, always. Base64 stores 3 bytes of image in 4 characters of text, so the string is about 33 percent larger than the original file. The size chip in this tool shows the exact overhead. That is why Base64 is best for small images: a 2 KB icon gains almost nothing, while a 2 MB photo becomes a 2.7 MB wall of text in your source code.
When should I use Base64 instead of an image file?
Use it for small, rarely changing images where saving an HTTP request matters or where a separate file is impractical: icons in a stylesheet, single-file HTML documents, code sandboxes and API payloads. Prefer a normal file for anything large or frequently reused, because inlined images cannot be cached separately and bloat every page that includes them.
How do I make the Base64 string smaller?
Shrink the image before encoding it — the string size follows the file size directly. Switch Encoding to WebP, which is usually the smallest, lower the quality slider until artifacts appear, and set a max width if the image is larger than it will ever be displayed. Cutting a 1200 pixel image down to 400 pixels routinely shrinks the string by 80 to 90 percent.
Are my images uploaded to your server?
No. The file is read and encoded by JavaScript running in your own browser, and the snippets are generated locally. Nothing is uploaded, which also means there are no size quotas beyond what your browser can handle and no waiting for a server round trip.
What image formats can I convert?
Anything your browser can read: PNG, JPG, GIF, WebP, BMP, ICO, AVIF and SVG all work. With Keep original selected, the bytes are encoded exactly as they are in the file — animated GIFs stay animated and SVGs stay vector. Re-encoding draws the image onto a canvas first, so it produces a static raster image.
How do I use a Base64 image in HTML or CSS?
Use the data URI anywhere a normal image URL would go. In HTML: an img tag with the data URI as its src, which this tool generates for you complete with width and height attributes. In CSS: background-image with url() wrapped around the data URI. Both snippets are ready to copy from the output panel.