← Hashito System Home 日本語 Tools Blog Posters
Choose an image
Click to choose an image
or drag and drop an image file here (PNG, JPEG, GIF, SVG, WebP, etc.)
A preview of the image appears here.
File name: -
Original size: - After (Data URL): -
How to use: Choose an image and the right side will generate a Data URL (data:image/...;base64,....) along with ready-to-paste <img> tag and CSS background-image snippets. The image is never sent to a server; everything is processed inside your browser.
Result
📖 We also offer free learning posters that illustrate how character encoding and data conversion work. Take a look at the learning posters as well.

Frequently Asked Questions (FAQ)

What is a Data URL (data URI)?

A Data URL represents the contents of a file, such as an image, as a single string like "data:image/png;base64,....". Because the image is Base64-encoded and embedded directly in the URL, you can paste it straight into an HTML img tag or a CSS background-image and display it without loading a separate external file. It is handy for embedding small icons or logos without adding extra HTTP requests.

Is the image I choose uploaded to a server?

No. The conversion happens entirely in JavaScript inside your browser (FileReader's readAsDataURL). The image you select is never sent to or stored on a server, so you can safely convert confidential images or images containing personal information.

What happens to the file size after Base64 encoding?

Base64 encoding represents 3 bytes with 4 characters, so the result is about 33% larger than the original image. The data: prefix and any line breaks add a little more. It is fine for embedding small images, but turning a large image into a Data URL bloats your HTML or CSS and reduces caching efficiency, so a normal image file reference is usually better.

📖 Free learning posters for students →