Skip to content

Image to Base64 Converter

In-browser only Image never uploaded 8 output formats
Drop an image here, or click to uploadPNG, JPG, GIF, SVG, WebP, BMP, ICO, AVIF — up to 20 MBPNG, JPG, GIF, SVG, WebP, BMP, ICO, AVIF · max 20 MB

Your Base64 output will appear here.
Related tools View all

Overview

Convert any image to Base64 in your browser

Upload any image and get a Base64 data URI instantly — eight ready-to-paste formats including HTML, CSS, Markdown, and JSON. All processing happens in your browser.

  • Drag-and-drop or click to upload
  • PNG, JPG, GIF, SVG, WebP, BMP, ICO, AVIF
  • Eight ready-to-paste output formats
  • One-click copy for each format
  • Runs entirely in your browser
  • Your image is read locally with the FileReader API
  • Nothing is uploaded to a server
  • Base64 encoding runs in JavaScript on your device
  • Files never leave your browser
  • No copies are kept after you close the tab
  • Embed a small icon directly in CSS to save an HTTP request
  • Inline an image in an HTML email that blocks external files
  • Paste a logo into a single-file HTML prototype
  • Store an image in a JSON config or API payload
  • Add a Base64 favicon link to a page head

Step by step

How to convert an image to Base64

  1. 1
    Upload your image

    Drag and drop an image file onto the upload area, or click the area to browse your files. Supported formats: PNG, JPG, GIF, SVG, WebP, BMP, ICO, and AVIF (max 20 MB).

  2. 2
    Preview and verify

    Your image appears as a thumbnail so you can confirm it is the right file. The file name, format, and size are shown alongside the preview.

  3. 3
    Choose your output format

    The tool generates your Base64 string in eight ready-to-use formats. Click the tab for the format you need — Data URI, HTML <img>, CSS background-image, Markdown, JSON, JavaScript, or favicon <link>.

  4. 4
    Copy to clipboard

    Click the copy button next to your chosen format. A "Copied!" confirmation appears so you know the text is on your clipboard.

  5. 5
    Paste into your project

    Paste the Base64 string directly into your HTML, CSS, Markdown file, or JavaScript code. No external image file needed.

Output formats

Eight formats, one click each

Format Description Example
Plain Base64 Raw Base64 string with no prefix — useful when your code already constructs the data URI. iVBORw0KGgo…
Data URI A complete data URI ready to use anywhere a URL is accepted: <img src>, CSS url(), JavaScript. data:image/png;base64,iVBORw0KGgo…
HTML <img> A ready-to-paste <img> tag with the data URI as the src and the filename (without extension) as alt. <img src="data:image/png;base64,…" alt="photo">
CSS background A background-image CSS property value, ready to paste into any CSS rule. background-image: url("data:image/png;base64,…");
Markdown image A Markdown image shortcode using the data URI — works in GitHub README files, Notion, and most editors. ![photo](data:image/png;base64,…)
JSON object A JSON object with mime and base64 keys — useful for APIs, configuration files, or storage. { "mime": "image/png", "base64": "…" }
JS new Image() A JavaScript snippet that creates an Image element with the encoded source. const img = new Image(); img.src = "data:…";
Favicon <link> An HTML <link> tag for embedding a Base64 favicon directly in the <head> of a page. <link rel="icon" type="image/png" href="data:…">

Frequently asked questions

Is my image uploaded to a server?
No. Everything happens entirely in your browser. Your image file is read locally using the FileReader API, encoded to Base64 in JavaScript, and never leaves your device. No data is sent to any server.
What image formats are supported?
PNG, JPG/JPEG, GIF, SVG, WebP, BMP, ICO, and AVIF. If you try to upload a format not on this list (such as TIFF, PSD, or RAW), the tool will show an error message listing the accepted formats.
Why is the Base64 string larger than my original image?
Base64 encoding represents binary data using only 64 printable ASCII characters. This encoding expands the data size by approximately 33%. A 1 MB image becomes roughly a 1.33 MB Base64 string. This is inherent to the Base64 algorithm (RFC 4648).
When should I use Base64 instead of a regular image file?
Base64 is useful when you need a self-contained file — for example, HTML emails that cannot reference external images, single-file prototypes, or small icons embedded in CSS to save HTTP requests. For large images, a regular file URL is usually better because Base64 increases file size and cannot be cached separately by the browser.
How does this tool work?
When you upload an image, the browser reads the file into memory using the FileReader API. The binary bytes are then converted to a Base64 string using the standard Base64 algorithm (RFC 4648). This string is wrapped in a data URI format (RFC 2397) that browsers recognise as an inline image source.
What is the maximum file size?
The tool accepts files up to 20 MB. This limit is set because encoding a 20 MB file produces a ~27 MB Base64 string, which can strain browser memory on lower-end devices.
Can I encode multiple images at once?
Currently the tool encodes one image at a time. Batch encoding is a planned future feature. For now, you can encode images one after another.
Does the tool work offline?
Yes. Once the page has loaded, the encoding process requires no network connection. Everything runs locally in your browser.