jarvisbox

Image to Data URI

Encode an image as a base64 data: URI for inline CSS or HTML embedding. Copy in one click.

Pick an image to encode.

How to use the data URI

  1. Pick an image — JPG, PNG, GIF, WebP and SVG are all supported.
  2. Copy the snippet you want — raw URI, HTML <img>, or CSS background-image.
  3. Paste it directly into your code. No external file needed.

Common use cases

Related: WebP to PNG · PNG to JPG · SVG to PNG · All image converters

Frequently Asked Questions

What is a data URI?
A data URI is a string that embeds the file contents directly inside a URL, using base64 encoding. They can replace <img src=""> URLs with inline data, removing one network request.
When should I avoid data URIs?
For large images. Base64 inflates size by ~33%, and inlining big images bloats your HTML / CSS payload. Use them only for small icons and decorative graphics.
Are my files uploaded?
No. Reading is done by FileReader inside your browser. Nothing is uploaded.
What size is the data URI compared with the original?
Base64 inflates the byte length by roughly 33%. We display both sizes after encoding.
Is there a size limit?
Browsers usually accept data URIs up to several megabytes, but performance suffers. For images above ~50 KB, keep the file external instead.
Does it expose private images?
No — the encoding is local. Be aware that anywhere you paste the data URI, anyone with access to that file can decode the image.

Last updated:

Report a problem with this tool