Image to Base64

How to use

Converts an uploaded image into a Base64 data URL string that you can paste directly into HTML, CSS or JSON without hosting a separate image file.

Image ToolsLocal only

Step 1 of 3: Upload

  1. 1
  2. 2
  3. 3

Step 1 of 3 · Upload

Select an image to convert to Base64

Processed on your device

When to use this
  • Inlining a small icon or logo directly into a CSS background-image to avoid an extra HTTP request
  • Embedding an image in a JSON payload for testing an API that expects Base64-encoded image data
  • Pasting an image directly into HTML email markup where external image hosting is unreliable
  • Generating a data URL to hardcode a placeholder image in source code or documentation

Free and private. Everything runs on your own device, with no account and no uploads.

Developers embedding small icons directly into CSS or HTML, or needing to paste image data into JSON/API payloads, often need a Base64 data URL representation of an image, and this tool converts any image file into that string. It is a common step when inlining images to avoid extra HTTP requests, or when testing an API that expects Base64-encoded image data. The encoding happens locally using the browser FileReader API, so the file is never transmitted anywhere.

The output is a full data URL string in the form data:image/[type];base64,[data], ready to paste into HTML, CSS, or JSON.

Yes, Base64 encoding increases the effective size by roughly 33% compared to the original binary file.

Yes, any image format your browser can read can be encoded, including PNG, JPG, WebP, and GIF.

Very large images can produce extremely long strings that may be slow to copy or paste, so it works best for icons, logos, and moderately sized photos.

How it works
  1. 1

    Upload the image

    Select the image file you want to encode.

  2. 2

    View the generated Base64 string

    The full data URL is generated automatically after upload.

  3. 3

    Copy the string

    Use the copy button to grab the Base64 output to your clipboard.

Pro tips
  • ·Remember the encoded string is about 33% larger than the original file, so reserve this for small icons and logos rather than full photos
  • ·Copy the full data URL (including the data:image/...;base64, prefix) if you plan to paste it directly into HTML or CSS
  • ·For large photos, encoding still works but the resulting string can be unwieldy to copy, paste, or store in version control