A data URI is a string that embeds the file contents directly inside a URL, using base64 encoding. They can replace 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.

画像 to Data URI

画像をbase64 data: URIで符号化。CSS/HTMLに直接埋め込み可能。

Image file

Pick an image to encode.

How to use the data URI

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

Common use cases

Inlining small icons (favicons, buttons) in HTML or CSS to remove HTTP requests.
Embedding a logo into a self-contained .html file for email or offline distribution.
Pasting screenshots into Markdown notes that travel as a single file.

よくある質問

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: 2026-05-20 By jarvisbox