Base64 Encode Image Online
Convert images to Base64-encoded data URIs for embedding in HTML, CSS, and JSON.
Open Base64 Encoder →What are Base64 Data URIs?
A data URI embeds file content directly in HTML or CSS using the format
data:[mediatype];base64,[data]. For example, a small PNG becomes data:image/png;base64,iVBORw0KGgo.... This eliminates an HTTP request for the image, which can improve performance for small icons and logos (under ~2KB). For larger images, separate files with proper caching are usually better.When to Use Base64 Images
- Small icons and logos: Under 2KB, inline Base64 saves an HTTP request.
- Email HTML: Email clients often block external images — inline Base64 always displays.
- CSS backgrounds: Small patterns or gradients in
background-image: url(data:...). - Single-file apps: Embed all assets in one HTML file for offline distribution.
Avoid for images over ~10KB — the 33% size increase from Base64 and loss of browser caching make separate files more efficient.
<!-- HTML inline image -->
<img src="data:image/png;base64,iVBORw0KGgo..." alt="icon" />
/* CSS inline background */
.icon {
background-image: url(data:image/svg+xml;base64,PHN2Zy...);
}
// JavaScript - convert file to Base64
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsDataURL(file);