Toolis.dev

Image to Base64

Drop any image and get its base64 data URI, raw base64, or a ready-to-paste CSS background-image / HTML <img> snippet — all generated in your browser.

  • Runs in browser
  • No signup
  • No tracking
Share
Found this useful?Buy me a coffee

How to use Image to Base64

  1. Drop or pick an image (PNG, JPG, GIF, WebP, SVG).

  2. Preview confirms the file loaded.

  3. Copy whichever snippet you need: data URI, raw base64, CSS, or HTML.

When to use it

  • Inlining a small icon in an HTML email template.

  • Embedding a CSS background-image as a data URI to avoid a separate request.

  • Producing a base64 payload for a config file or test fixture.

  • Embedding an SVG as a data URI in a stylesheet.

What it fixes

  • Online converters that upload images for a 'free' encode.

  • Manually base64-encoding via the terminal when you're already in a browser.

  • Copy/paste errors when generating snippets by hand.

About Image to Base64

Inlining a small image as a base64 data URI saves an HTTP request — handy for tiny icons in emails, embedded SVG in stylesheets, or content where loading the original file is awkward. Modern bundlers can do this for you, but sometimes you just need a one-off string to paste into a CSS rule or a config file.

This tool reads your image via the browser's FileReader API and produces four artefacts at once: the full data URI, the raw base64 payload (no `data:` prefix), a CSS `background-image` snippet, and an HTML `<img>` snippet. Nothing uploads.

References: MDN — Data URIs · MDN — FileReader.readAsDataURL

Frequently asked

  • What's a data URI?

    A data URI inlines a file's contents directly into a URL (e.g., `data:image/png;base64,iVBORw0KG…`). It avoids a separate HTTP request, useful for very small icons, email images, or embedded SVG.

  • When should I NOT inline images as base64?

    Anything over ~5 KB. Base64 inflates size by ~33%, blocks parallel downloads, and isn't cached separately — so inlining a large image makes pages slower, not faster.

  • Is my image uploaded?

    No. Encoding uses the browser's FileReader API. Your image never leaves your device.

  • What's the size difference?

    Base64 encodes 3 bytes as 4 ASCII characters, so the encoded text is ~133% the size of the source bytes. UTF-8 byte size matches character count here since base64 is ASCII-only.

Discussion

All tools