Tutorial·
How to Convert Images to Base64 for Embedding
Step-by-step guide to converting images to Base64 data URIs for embedding in HTML, CSS, and JSON.
Why Embed Images as Base64?
Embedding a small image as a Base64 data URI eliminates an HTTP request. Useful for: email templates (external images are often blocked), small icons in CSS, JSON payloads that include image data.
Step 1: Open the Tool
Go to /tools/base64-encoder-decoder and select the File tab.
Step 2: Upload Your Image
Click Choose File and select your PNG, JPG, GIF, or SVG. The tool converts it instantly.
Step 3: Copy the Data URI
The output includes the full data URI prefix:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
Step 4: Use in HTML or CSS
<img src="data:image/png;base64,iVBORw0KGgo..." alt="icon">
.icon {
background-image: url("data:image/png;base64,iVBORw0KGgo...");
}
When NOT to Use Base64
Base64 increases file size by ~33%. For images larger than ~5KB, an external reference with HTTP/2 is faster.