Imagen a Base64
Arrastra, pega o elige una imagen para obtener su código Base64 al instante: un data URI listo para usar, Base64 sin prefijo, una regla de fondo CSS o una etiqueta img de HTML. Tus imágenes nunca salen de tu dispositivo.
Última actualización:
Cómo usar Imagen a Base64
- Añade una imagen: arrástrala al área de carga, haz clic para elegir un archivo o pega una captura de pantalla con Ctrl+V. Puedes añadir varias a la vez.
- Elige un formato en las pestañas: Data URI, Solo Base64, CSS, HTML <img>, Markdown o JSON.
- Si quieres, redúcela: elige Recodificar como WebP o JPEG y define un ancho máximo para obtener una cadena mucho más corta.
- Copia o descarga el código y pégalo en tu HTML, CSS, JSON o plantilla de correo.
- Cambia de imagen con las miniaturas si añadiste más de una.
Cómo funciona la codificación de imágenes en Base64
Base64 lee el archivo de 3 en 3 bytes (24 bits) y los divide en cuatro grupos de 6 bits. Cada grupo es un número del 0 al 63 que corresponde a un carácter del alfabeto A–Z a–z 0–9 + /. Si la longitud del archivo no es múltiplo de 3, el último grupo se rellena con uno o dos signos =. Por eso el tamaño codificado siempre es de 4 × ⌈bytes ÷ 3⌉ caracteres, aproximadamente un 33% más que el archivo original.
Un data URI envuelve ese texto con el tipo de archivo para que los navegadores sepan cómo decodificarlo: data:[MIME type];base64,[data]. Por ejemplo, un PNG empieza con data:image/png;base64,iVBORw0KGgo, porque todos los archivos PNG comienzan con los mismos 8 bytes de firma.
Dónde usar cada resultado
| Resultado | Úsalo para | Ejemplo |
|---|---|---|
| Data URI | Cualquier lugar que acepte una URL: img src, url() de CSS, JavaScript, canvas | data:image/png;base64,iVBOR… |
| Solo Base64 | APIs y campos JSON que esperan solo los bytes codificados, partes MIME de correos | iVBORw0KGgoAAAANSUhEUg… |
| CSS | Iconos pequeños y patrones de fondo dentro de una hoja de estilos | background-image: url("data:…") |
| HTML <img> | Páginas HTML de un solo archivo, plantillas de correo, documentos sin conexión | <img src="data:…" alt="logo"> |
| Markdown | Archivos README y notas que deben incrustar la imagen |  |
| JSON | Enviar una imagen con su nombre, tipo y tamaño a una API | {"mime": "image/png", "base64": "…"} |
Consejos para obtener cadenas Base64 más cortas
- Incrusta solo archivos pequeños. Los iconos de menos de 5 a 10 KB son buenos candidatos. Las imágenes más grandes funcionan mejor como archivos normales que el navegador puede almacenar en caché.
- Recodifica las fotos como WebP o JPEG y define un ancho máximo cercano al tamaño con el que realmente las muestras. Una foto de teléfono de 4000 px mostrada a 400 px puede reducirse más de un 95%.
- Usa PNG para gráficos planos con bordes nítidos o transparencia. JPEG no admite transparencia, así que las zonas transparentes se rellenan de blanco.
- Los iconos SVG suelen ocupar menos como SVG. Minifica primero el SVG y luego codifícalo.
- Correo electrónico: muchos clientes de correo, incluido Gmail, bloquean las imágenes en data URI. Para correos, adjunta la imagen o alójala en un servidor.
Preguntas frecuentes
¿Qué es una imagen en Base64?
Son los bytes del archivo de imagen escritos como texto con 64 caracteres seguros (A-Z, a-z, 0-9, + y /). Dentro de un data URI como data:image/png;base64,..., se puede usar directamente en un img src, en un url() de CSS o en JSON sin un archivo aparte.
¿Por qué la cadena Base64 es más grande que la imagen?
Base64 convierte cada 3 bytes en 4 caracteres, así que el texto ocupa aproximadamente un 33% más que el archivo original (más algunos caracteres de relleno y el prefijo del data URI). La compresión Gzip o Brotli de tu servidor recupera parte de ese tamaño.
¿Cuándo conviene incrustar imágenes en Base64?
Es útil para iconos, logotipos y marcadores de posición pequeños (unos pocos KB), para páginas HTML de un solo archivo, plantillas de correo y APIs JSON. Para fotos grandes es mejor un archivo de imagen normal, porque se puede almacenar en caché por separado y no infla tu HTML o CSS.
¿Mis imágenes se suben a un servidor?
No. El archivo se lee con la API FileReader del navegador y se codifica en tu dispositivo. No se envía nada a ningún sitio, así que es seguro para capturas de pantalla privadas y diseños sin publicar.
¿Puedo convertir SVG a Base64?
Sí. Los archivos SVG se codifican igual que otras imágenes y reciben el tipo MIME image/svg+xml. Con SVG también puedes usar un data URI codificado como URL, pero Base64 funciona en todas partes y evita problemas de escape.
¿Cómo vuelvo a convertir Base64 en una imagen?
Usa la herramienta Base64 a imagen: pega el data URI o el Base64 sin prefijo y mostrará una vista previa, detectará el tipo de archivo y te permitirá descargar la imagen.
¿Hay un límite de tamaño?
No hay un límite fijo, pero las cadenas muy grandes (decenas de MB) pueden ralentizar la página. Para fotos grandes, usa primero la opción de recodificar para redimensionarlas y comprimirlas.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.
Herramientas relacionadas
Ver todas las de Conversores de datos y formatos de archivo →