Loading...
Convert images to Base64 encoded data URLs
Convert images to Base64 encoding instantly with our free online image to Base64 converter. This tool helps web developers embed images directly in HTML and CSS by encoding images as Base64 strings. Simply upload your image and get Base64 encoded output in real-time.
No image selected
Upload an image to convert it to Base64
Base64 encoding converts binary image data into ASCII text format. This is useful for embedding images directly in HTML, CSS, or JSON without requiring separate image files.
Common uses:
Note: Base64 encoded images are approximately 33% larger than the original file.
Image to Base64 conversion encodes image files (PNG, JPG, GIF, etc.) into Base64 text strings. This enables embedding images directly in HTML, CSS, or JSON without separate file requests - useful for small icons, email templates, and reducing HTTP requests.
The converter reads the image file as binary data, encodes it using Base64 algorithm (3 bytes → 4 characters), and optionally prepends a data URI scheme (data:image/png;base64,...). The result is a text string that browsers can render as an image.
Data URI format: data:[mediatype][;base64],data. Common types: image/png, image/jpeg, image/gif, image/svg+xml, image/webp. Base64 adds ~33% size overhead. Browser support is universal for data URIs up to several MB, but performance varies.
Embed small icons as CSS background-image data URIs.
background-image: url(data:image/png;base64,iVBORw0KGgo...)Embed images in emails to avoid blocked external images.
Create self-contained HTML files with embedded images.
Store images in JSON documents or databases.
Send images in JSON API request bodies.
// From file input
function imageToBase64(file) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.readAsDataURL(file);
});
}
// Usage with file input
const input = document.querySelector('input[type="file"]');
input.onchange = async (e) => {
const dataUrl = await imageToBase64(e.target.files[0]);
// data:image/png;base64,iVBORw0KGgo...
};
// From canvas
const dataUrl = canvas.toDataURL('image/png');FileReader.readAsDataURL() creates a complete data URI. Canvas.toDataURL() works for dynamically created images.
import base64
# From file
with open('image.png', 'rb') as f:
image_data = f.read()
base64_string = base64.b64encode(image_data).decode('utf-8')
# With data URI
data_uri = f'data:image/png;base64,{base64_string}'
# Using PIL for format detection
from PIL import Image
import io
def image_to_data_uri(filepath):
with Image.open(filepath) as img:
buffer = io.BytesIO()
img.save(buffer, format=img.format)
b64 = base64.b64encode(buffer.getvalue()).decode()
mime = Image.MIME.get(img.format, 'image/png')
return f'data:{mime};base64,{b64}'PIL can detect image format for correct MIME type. Works with any image format PIL supports.
Use Image to Base64 for small images, icons, email templates, single-file exports, or API payloads. Avoid for images over 10KB or when browser caching would be beneficial.
Use Base64 for small images (<10KB), icons, and when reducing HTTP requests matters. Use file URLs for larger images, when caching is important, or when the same image appears multiple times.
GIF Viewer online tool. Fast processing, multiple format support, and quality preservation. Perfect for web developers, designers, and content creators.
Image Info online tool. Fast processing, multiple format support, and quality preservation. Perfect for web developers, designers, and content creators.
Image Resize online tool. Fast processing, multiple format support, and quality preservation. Perfect for web developers, designers, and content creators.