How to Convert an Image to Base64
A step-by-step guide to encoding PNG, JPG, SVG, and WebP images into Base64 data URIs — and where to use them in HTML, CSS, and JavaScript.
Want to skip ahead?
Use the free online tool to convert your image in one click.
What is a Base64 image?
A Base64 image is an image file encoded as a text string using the Base64 encoding scheme. Instead of referencing an image by its file URL, you embed the image data directly as a long string of ASCII characters.
The result is a data URI — a string that begins with data:image/png;base64, (or jpeg, svg+xml, webp, etc.) followed by the Base64-encoded image bytes.
Browsers understand this format natively — you can paste a data URI anywhere a regular image URL is expected and it works exactly the same way.
Step-by-step: image to Base64 using the online tool
Open the Base64 Image converter
Go to Base64 Tool and click the Image tab at the top of the tool. You don't need to sign up or install anything — it runs entirely in your browser.
Upload your image
Drag your image file (PNG, JPG, GIF, WebP, or SVG) onto the drop zone, or click Browse files to open a file picker. The tool accepts images of any size, though very large files (over 10 MB) may slow down the conversion.
Copy the Base64 data URI
The encoded output appears instantly in the text area below the image preview. It starts with a prefix like data:image/png;base64,. Click Copy to grab the full string — it's ready to paste into HTML, CSS, or JavaScript.
Use it in your project
Paste the data URI wherever a regular image URL would go. No file hosting required — the image is embedded directly in your code.
Where to use Base64 images
Inline images in HTML
Embed images directly in your HTML without a separate file request. Useful for small icons and logos.
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo" />
Background images in CSS
Reference an image in CSS without a network request, reducing page load time for small assets.
.icon {
background-image: url("data:image/svg+xml;base64,PHN2...");
}Images in email templates
Many email clients block externally hosted images. Embedding Base64 images ensures they always display.
<img src="data:image/png;base64,iVBORw0KGgo..." />
JavaScript / Canvas
Use data URIs as sources for Image objects in canvas rendering or pass them through JSON APIs.
const img = new Image(); img.src = "data:image/webp;base64,UklGRiQ...";
When not to use Base64 images
Base64 encoding increases file size by roughly 33% — a 100 KB PNG becomes ~133 KB of text. For large images, this overhead can hurt page load performance more than saving an HTTP request helps.
Base64 images also cannot be browser-cached separately — they're part of the HTML or CSS file. A standalone image file is cached and reused across page loads; an embedded Base64 string is re-downloaded every time.
Best for: small icons, logos, and inline SVGs where saving a network round-trip outweighs the size cost.
Avoid for: photographs, large graphics, or images used on many pages.
Convert an image to Base64 in JavaScript
If you need to convert images programmatically in the browser, you can use the FileReader API or draw to a <canvas> element:
// Using FileReader (works with File/Blob objects)
function imageToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result); // data URI string
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
// Example usage with an <input type="file">
input.addEventListener('change', async (e) => {
const file = e.target.files[0];
const dataUri = await imageToBase64(file);
console.log(dataUri); // "data:image/png;base64,iVBORw0K..."
});For server-side conversion in Node.js, read the file into a Buffer and call .toString('base64'):
// Node.js
const fs = require('fs');
const data = fs.readFileSync('./logo.png');
const base64 = data.toString('base64');
const dataUri = `data:image/png;base64,${base64}`;Ready to convert your image?
Free, instant, and 100% private — no file is ever uploaded to a server.