Santekno/tools
CategoriesTutorials

Image → Data URI

Embed an image directly in CSS/HTML as a base64 data: URI. Inspect existing data URIs too.

Processed in your browserUpdated · Jan 2026
Input
0 chars
Output
0 chars

How to use Image → Data URI

Paste your input on the left, choose the options you want, and the output appears instantly on the right. Everything runs in your browser — none of your data is sent to a server.

  • Paste or type your input in the INPUT panel
  • The output regenerates automatically as you type
  • Use Copy to put the result in your clipboard
  • Click Sample to load a working example

What is Image → Data URI?

Image to Data URI converts a local image file (PNG, JPG, GIF, WebP, SVG, BMP) into a base64-encoded data URI suitable for inlining in CSS `background-image: url(...)` or HTML `<img src="...">`. Files are processed entirely in your browser via FileReader — nothing is uploaded. If you paste an existing data URI, the tool decomposes it: MIME type, base64 flag, payload length, and approximate decoded byte size. Useful for spriting small icons, embedding in emails, or debugging existing data URIs. This tool is part of santekno's developer toolbox — a curated collection of utilities built for engineers who care about speed, privacy, and simplicity.

Common use cases

  • Debugging API payloads and integration issues
  • Inspecting tokens, hashes, or encoded strings during development
  • Generating fixtures and sample data for tests
  • Sharing readable output with teammates in code reviews

FAQ

For tiny icons (<2KB) reused across many components — saves an HTTP request. Avoid for large images: base64 adds ~33% size overhead and prevents browser caching.