๐ผ๏ธ Image to Base64
Drag & drop an image here, or click to select
Convert an image file into a Base64 data URI. Useful when you want to embed an image directly in CSS or HTML without hosting a separate file โ for example, bundling a small icon or logo into a single CSS or HTML file.
How to use
- Drag and drop an image, or click to select a file.
- The generated data URI (Base64 string) appears automatically.
- Click "Copy" to copy the raw data URI, or "Copy as CSS" to copy it as a ready-to-use background-image property.
How the calculation works
Base64 represents binary data such as an image using only letters, digits, "+", "/" and "=". It splits every three bytes (24 bits) into four groups of six bits and maps each to one of 64 characters. Three bytes become four characters, so the output is about 4/3 of the original size โ roughly 33% larger. This tool reads the image and outputs it as a data URI, with a MIME-type prefix such as "data:image/png;base64,". Data URIs are defined in RFC 2397 and can be placed directly in an HTML img src attribute or a CSS url() in place of a separate image file. That saves a separate file, which is useful for reducing the number of files or embedding small images in HTML email.
Worked example
A 3,000-byte icon 3,000 รท 3 ร 4 = 4,000 characters (excluding the "data:image/png;base64," prefix) About 1 KB larger. A 12 KB image becomes about 16 KB. In HTML: <img src="data:image/png;base64,iVBORw0KGgo..." alt="icon"> In CSS: background-image: url("data:image/png;base64,...").
Things to be aware of
- Base64 adds about 33% to the size, so it is not suited to large photos.
- Images embedded as data URIs are not cached separately by the browser; for an image reused across many pages, a normal file is more efficient.
- Some email clients do not display data-URI images.
- Conversion happens in your browser; the image is not sent anywhere.
FAQ
Does Base64 encoding increase file size?
Yes. Since Base64 converts binary data into text, the result is roughly 33% larger than the original file.
What is this typically used for?
Embedding small icons directly in a CSS background-image or an HTML img src attribute without a separate file request.
Is this a good fit for large photos?
Since Base64 adds about 33% to the file size and bloats the HTML/CSS file itself, it's better suited to small images like icons or logos than large photos.
Is my converted image sent to a server?
No. Everything is processed in your browser, so neither the image nor the resulting data URI is sent anywhere.
Can I paste the data URI straight into HTML?
Yes โ paste it directly into the src attribute of an <img> tag.