🖼️ Image to Base64 Encoder
Convert images to Base64 data URIs for embedding in HTML, CSS, or JSON. Supports JPEG, PNG, GIF, SVG, and WebP. Free online image to Base64 converter — runs in browser.
🖼️
Drop an image here or
PNG, JPG, GIF, WebP, SVG supported
How to Use
1
Upload your image
Click the upload area or drag and drop any PNG, JPG, GIF, WebP, or SVG file.
2
Choose output format
Toggle between full Data URI (data:image/png;base64,...) and raw Base64 string only.
3
Copy the result
Click Copy to clipboard. Use the data URI directly in your CSS background-image or HTML src attribute.
Frequently Asked Questions
What is a Base64 image data URI?
A data URI embeds the image directly in your HTML or CSS as text: data:image/png;base64,iVBORw0KGgo.... This eliminates a separate HTTP request for the image file, useful for small icons, backgrounds, and email templates.
What image formats are supported?
PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, and most common image formats are supported. The MIME type is automatically detected from the file and included in the data URI.
How large will the Base64 output be?
Base64 encoding increases file size by approximately 33%. A 100KB image becomes roughly 133KB as Base64 text. For images over 50KB, linking to the file is usually better for performance than embedding.
How do I use this in CSS?
Copy the full data URI and use it as: background-image: url("data:image/png;base64,..."); In HTML: <img src="data:image/png;base64,...">. For email templates, inline data URIs ensure images display without external loading.
Is my image uploaded to a server?
No. The entire conversion runs in your browser using the FileReader API. Your image never leaves your device and is never sent anywhere.
Guía: Convertidor de Imagen a Base64
¿Qué es?
Convierte imágenes a cadenas Base64 para incrustarlas directamente en CSS, HTML o JSON sin archivos externos. Ideal para iconos pequeños, emails HTML y APIs que requieren datos binarios en JSON.
Desventaja: imágenes ~33% más grandes y sin caché separada — solo para recursos pequeños (<5KB).
Cómo usar
- Arrastra o sube la imagen (PNG, JPG, SVG, GIF).
- El data URI completo se genera automáticamente.
- Copia para usar directamente en CSS/HTML.
Consejos
- Usa SVG en Base64 para iconos — son más pequeños que PNG y escalables.
- Para imágenes grandes, usa CDN con HTTP/2 en lugar de Base64 inline.
- El data URI para PNG:
data:image/png;base64,...