Image to Base64

How do I convert an image to Base64?

1. Drop a single image file (PNG, JPG, WebP, GIF or SVG) onto the drop zone.
2. Choose Output as: Data URI (for src="…"), Raw base64 only, HTML image tag, or CSS background-image.
3. Click Convert to Base64.
4. Click Copy output and paste the text into your HTML, CSS or code.

Base64 turns binary data into plain text using 64 safe characters, which lets an image live inside a file that can only hold text: an HTML page, a stylesheet, a JSON payload, an email body or a Markdown document. The browser decodes it on the fly, so the image displays without a separate request to a server. The cost is size. Every 3 bytes become 4 characters, so the encoded string is about 33% larger than the original file, and it cannot be cached separately from the document it is embedded in.

The tool reads the file's bytes in your browser and encodes them directly. The original data is used as-is, so a PNG stays a PNG and an SVG stays an SVG; nothing is re-encoded or resized. The MIME type is detected from the file and written into the data URI prefix, for example data:image/png;base64, so browsers know how to decode it.

The four outputs suit different destinations. Data URI is the general-purpose form you paste into an image src, a JSON field or an API request. Raw base64 only gives just the encoded string with no prefix, for systems that add their own or store it in a database. HTML image tag wraps the URI in a ready-to-paste img element. CSS background-image produces a url() declaration for a stylesheet, handy for icons on buttons and list markers.

Use Base64 sparingly. It is ideal for small assets, roughly under 10 KB, such as icons, logos, spinners and single-colour patterns, where saving an HTTP request outweighs the size penalty. For photographs and anything larger it makes pages heavier and slower to parse, and a normal image file with proper caching is the better choice. Compress or resize first if the asset is bigger than it needs to be; a 200 KB hero image as Base64 becomes 270 KB of text inside your HTML.

Nothing is uploaded. The file is read into memory, encoded and displayed in the page, and closing the tab discards it. That makes it safe to use for private assets and unreleased designs.

How it works: this tool uses your browser's Canvas and WebCodecs APIs, plus libheif for HEIC. No server is involved, so Kilnfile never sees your file. Last reviewed 20 September 2026.

Frequently asked questions