Image to Base64 (Data URI)

Convert any image to a base64 data: URI. Drop the image into the page; conversion happens in your browser. Useful for embedding small icons in CSS/HTML, attaching images to LLM API calls, or sending images through JSON-only APIs. The image never uploads anywhere.

How to use the Image to Base64 (Data URI)

Drop an image into the file picker (or paste from clipboard — most browsers support paste-to-file-input). Pick the output format you need. The Base64 string is automatically generated and ready to copy.

When to embed images as data URIs

Embedding small images directly in your HTML/CSS/JSON eliminates an HTTP request. For tiny icons (under ~4KB), this is often a net win: one fewer request, slightly more bytes in the parent file, but no separate cache lookup. For larger images, the parent file gets bloated and uncacheable.

Common use cases: SVG icons inlined in CSS background-image, fav-equivalent images embedded in email templates (some clients block external images), images attached to LLM API calls (Anthropic and OpenAI accept base64 image content blocks alongside text).

Base64 adds ~33% size overhead vs the raw bytes. A 10KB image becomes 13.3KB encoded. For LLM API calls, this overhead counts against your token budget — most providers tokenize the encoded image roughly proportionally to its byte length.

Common use cases

  • Inline SVG icons in CSS to eliminate per-icon HTTP requests.
  • Email templates where external images may be blocked.
  • Sending images to LLM APIs (GPT-4o vision, Claude vision, Gemini multimodal).
  • Embedding small images in JSON test fixtures or seed data.
  • Quick image preview before uploading elsewhere.