Convertir imagen a Base64 – Data URI para HTML y CSS
Codifica imágenes en Base64 para incrustarlas en HTML, CSS, JSON o emails, o pega Base64 para ver y descargar la imagen. Funciona con PNG, JPG, WebP, GIF y SVG.
Suelta una imagen para obtener su data URI, el Base64 puro, una etiqueta y una regla CSS de fondo, cada uno con botón de copiar. Para decodificar, cambia a «Base64 → imagen», pega el texto y descarga la imagen. Base64 aumenta el tamaño un 33 %, así que conviene para iconos pequeños.
Cómo usar la herramienta: Imagen a Base64
- Elige «Imagen → Base64» o «Base64 → imagen».
- Suelta una o varias imágenes, o pega un texto Base64.
- Copia la data URI, el Base64, el HTML o el CSS.
- Mira el aumento de tamaño de cada archivo.
- Descarga las imágenes decodificadas con un clic.
¿Qué es una imagen en Base64?
Base64 convierte datos binarios en texto usando 64 caracteres seguros. Una data URI añade delante el tipo de archivo, por ejemplo data:image/png;base64,iVBORw0…, para que el navegador muestre la imagen sin un archivo aparte. Puedes pegarla en el atributo src de un <img>, en un fondo CSS o en un JSON.
Cuándo usarla
| Buen uso | Mejor como archivo normal |
|---|---|
| Iconos y logos pequeños (menos de 10 KB) | Fotos e imágenes grandes |
| Firmas de email y correos HTML | Imágenes usadas en muchas páginas |
| Demos HTML de un solo archivo | Todo lo que cambia a menudo |
| APIs JSON que solo aceptan texto | Imágenes que deben guardarse en caché |
Base64 hace el archivo un 33 % más grande y la imagen incrustada no se guarda en caché por separado. Para imágenes mayores, comprímelas con el Comprimir imágenes y enlaza el archivo.
Decodificar Base64
Pega una data URI o un Base64 simple para ver y descargar la imagen. Se acepta el Base64 seguro para URL (con - y _) y el tipo de archivo se detecta por los primeros bytes cuando falta el prefijo data:. Es útil para revisar imágenes guardadas en bases de datos, respuestas de API o código HTML.
El caso del SVG
Los SVG ya son texto, así que Base64 los agranda sin ventaja. Para SVG en CSS suele ocupar menos la codificación URL, que puedes hacer con Codificar y decodificar URL. Para convertir antes un SVG en PNG, usa Convertir SVG a PNG.
Privacidad
Las imágenes se leen y codifican con la API FileReader en tu navegador y nunca se suben. Para texto y otros archivos, el codificador Codificar y decodificar Base64 funciona con cualquier cadena.
Emails y páginas sin conexión
Algunos programas de correo bloquean las imágenes externas, mientras que las incrustadas se ven al instante; mantenlas pequeñas, porque los correos grandes se recortan o acaban en spam. Un HTML con imágenes incrustadas también funciona sin conexión y se comparte como un solo archivo.
También te pueden servir estas herramientas gratis: Formateador JSON, Generador de contraseñas y Probador de regex.
Preguntas frecuentes
¿Cómo convierto una imagen a Base64?
Suelta la imagen en la herramienta. Aparecen la data URI, el Base64, el HTML y el CSS con botones de copiar.
¿Cómo paso Base64 a imagen?
Cambia a Base64 → imagen, pega el texto y pulsa Descargar imagen.
¿Por qué ocupa más en Base64?
Base64 usa 4 caracteres por cada 3 bytes, así que el archivo crece un 33 %.
¿Debo usar imágenes Base64 en mi web?
Solo para imágenes muy pequeñas. Las grandes cargan más rápido como archivos aparte que se guardan en caché.
¿Se suben mis imágenes?
No. Todo ocurre en tu navegador.
Última actualización: